最新の息抜き進捗
デザインがおおかた終わったので、これからコーディングに入る。
デザインツールにFigmaを初めて使ってみたけれど、XDよりも圧倒的使いやすいと思った。
ブラウザでも動くことに加えて、ファイル同期がとても速い。
ショートカットの種類も豊富で、スタイルのコピペができることに感動した（XDでもできたらごめん）。
ちなみにショートカットタブを開くと未使用は黒、使用済みは青で表示される。
ショートカット使用時にはちょっとしたインタラクションがあって、そういった遊び心も楽しい。
プロトタイプはXDでもほぼ触ったことがないんだけど、固定表示にしたときに必ず表示順が上になるのが少し引っかかった。
気になるのはそのくらいで、プレビュー表示も圧倒的に見やすい。
端末を細かく設定して嵌め込みのプレビューが見れるので、XDのときによくあった「コーディングしたら文字デカすぎ問題」も発生しにくそうな気がする。
それから拡張機能の豊富さと、導入のし易さが半端ない。
オブジェクトを斜めにずらしたかったので拡張機能を入れたところ、ブラウザでブクマをしたら、デスクトップアプリですぐに使えてとても便利だった。
フォントもPCにインストールすると、再起動しなくてもフォント一覧に追加してくれる。すごい。
ぼくはWEBフォントをそのまま使いたいので、Google FontsからDLして使用している。
Google Fontsもフォントの種類が豊富になっていてとても助かった。サ終したらどれだけのサイトが悲鳴を上げることだろう。
今回使用したのはChangoとZen Maru Gothic 。
このまえはAlfa Slab Oneを使用してみたけど、雰囲気と合わなかったので変更した。
それに伴ってロゴも作り直している。
デザインで苦労した箇所を少し書いてみる。
まずはロゴ。
色のコントラストが弱いからどうにかパキっとさせたい、となってシャドウを付けたり消したり線を付けたり消したりハイライトを付けたり消したりした。
それから、配置したときにどうしても中心からズレた印象になってしまうので、バランス良く見えるように調整するのが大変だった。
中央揃えにもしてみたけれど、最初の文字がデザインに埋もれてしまって見づらいのが気になって没。
悩んでいる最中にとても便利なサイトを見つけたので、コリスの記事を共有しておく。
それから背景色。
コーポレートサイトやブログサイトなら白かグレーが鉄板だけど、今回はクイズアプリなので、凝った印象にしたい。
本家ポケモンサイトの特設サイトを見ながら、素材を作ったりパターンを作ったりした。
（一番印象に残っているのは剣盾の特設サイト、ヒーローイメージのインタラクションがカッコ良すぎる）
グレーから青にするグラデーションも、無くてもいいかなと思いつつ、青単色だと眩しい気がしてそのままにしている。また変えるかもしれない。
ボタンのデザインも大変で、何をしても違和感があってTypoしてるんじゃないかと思ったけれど、全て大文字にしていたのが良くなかったらしく、キャメルケースにしたら少し落ち着いた。
英語表記のUIを調べてみたところ、キャメルケースの表記の方が圧倒的に多かった。もっと早く調べればよかった。
文字も彩度の高い単色だとぼんやりした印象になってしまうので、グラデーションを乗せている。
ボタンのDisable状態をどう表現しようかも悩んだ。
ブラウザのユーザーエージェントだと半調や半透明になっていることが多いので、そうしてみたけど、いまいち伝わらない。
検索して、無彩色にすればいいという単純なことに気づいて実装。これが正解じゃん。
複数言語対応の兼ね合いでできるだけテキストに頼りたくなかったので、正解不正解の表示は意図的に記号のみにしている。
問題表示の白枠は、どうしても名前の長いポケモンが居る気がしているので、文字長と文字サイズは後で調整することにしている。
場合によってはJSで画面の幅に合うように調整する方がクイズとしての見栄えが良さそうな気がしているので、そういうこともできたらいいな。
デザインしているときは実装するの面倒だなやだなという気持ちだったけど、こうしてレビューしていると楽しみになってきた。
今月中に出せたら嬉しい。
いいなと思ったら応援しよう！
