Suicaのアイコン、コーディングしてみた

最近、スマホにICカードを移したらパスワードを忘れてチャージができなくなったコーダー、小川です。

QRコードに引き続き、何をコーディングしようかな…と日々考えていました。
虚無にならず、短時間で作れるもの…。笑

思い当たるものは時間がかかりそうだなぁ…と思いつつデスクの引き出しを開けると、シンプルなデザインのカード、PASMOがありました。

このデザインならサクッと作れそうな気がして、早速画像を調べていると検索結果に別のICカードのアイコンが。

Suicaのペンギンって可愛いですよね。

ということで、最初に見かけたPASMOではなく、今回はSuicaのアプリアイコンをコーディングしてみました!

下準備不要、コーディング開始

今回のデザインはほぼ丸と四角。
分解しなくてもある程度は作成するイメージが湧きました。

普段複雑なデザインをCSSで作るときは紙に分解した設計図を書き出すのですが、今回はそのままコーディングを進めていこうと思います。

シンプルなので、目標時間は30分。
時間をかけずササっと作りたいと思います!

開始5分、早速詰まる

背景の緑色を作り、顔のベースの位置を整え…。
かなり良いスタートが切れたところで、早々に詰まりました。

「この口の微妙な曲線…CSSでどうすれば…?」

(作っていたのが金曜日の通常業務終了後だったのもあり、帰りたさであまり頭も回らず…。笑)

ユニットメンバーにアイデアを聞いたところ、「 ) 」を回転させればいけるのでは?という素晴らしいアイデアをいただきました!!

早速作りかけのアイコンに「 ) 」を入れてみたところ、デフォルトのフォントではなんとなく惜しい印象…。
シンプルが故に妥協できない部分だったので、google fontに駆け込みました。

色々なフォントを見比べてみて、一番この口に近かったフォントはMontserratでした!
今後コーディングしてみる方は参考にしてみてください!笑

バランスが難しい…

口の問題が解決したので、次は目の位置を整えていきます。

パーツの少ないキャラクターは一つ一つの位置で印象が変わりますよね。
調整している途中、なんとも言えない顔になりかけました。

目と口の位置で印象がだいぶ変わりますね!

完成したアイコンがこちら

口の部分以外はサクサクと作れたので、予定よりは少しかかってしまいましたが45分くらいで完成しました!

See the Pen suica by spiqa design (@spiqa_design) on CodePen.

実際のアイコンとの比較

左:コードで作ったアイコン / 右:実際のアイコン

それなりに再現ができたかと思いますが、やっぱり細かい部分のバランスが難しかったです…。
次は今回作らなかったPASMOや、ペンギンの全身を作ってみようかなと思います!

コーダーが遊んだ記事はこちら

この記事をシェアする

関連記事

  • 2022.08.04

    【Photoshop】消点(Vanishing Point)を使ってモックアップを作成する方法

    デザイン

    制作

  • 2022.07.29

    Simple Calenderで日付/曜日がズレてしまう時の解決法

    コーディング

    制作

  • 2022.07.26

    【超便利】プレミアプロとアフターエフェクトの連携で快適な動画編集術をご紹介

    制作

    動画

おすすめ記事

  • 2022.04.28

    【カメラ初心者向け】物撮りが上手くなるコツ ~食べ物編~

    その他

    制作

  • 好きなフォントは?現役WEBデザイナーに聞いてみた!

    2022.06.01

    デザイナーなら好きなフォントの1つや2つあるでしょ?現役WEBデザイナーに好きなフォント聞いてみた!

    デザイン

    制作

  • 2022.04.22

    【動画編集ソフト】アフターエフェクトとプレミアプロってなにが違うの?違いと使い分けを解説!

    制作

    動画

×