デザインコースの進め方

世界中のデザインの教科書に出てくる、4つのルールから始めます。難しい道具は不要で、Figmaと観察眼だけで学べます。

課題: 好きなサイトのスクリーンショットに、4原則が使われている場所を見つけて印をつけ、スタッフに説明する。「きれい」を言葉で説明できるようになるのが、このユニットの修了条件です。

色選びには有名な型があります。「ベース70% : メイン25% : アクセント5%」。背景になる静かな色が7割、サイトの顔になる色が2.5割、ここぞで目を引く色が0.5割です。この3色を選ぶ道具として、無料の配色ツール Coolors(クーラーズ) を使えるようになります。

Coolorsの使い方 ― 5分でパレットが作れます

1. ブラウザで coolors.co を開く検索で「Coolors」でもOK。英語のサイトですが、使うのはボタン2つとキー1つだけです。
2. 「Start the generator」をクリック画面いっぱいに5色のパレットが出ます。登録なしで使えます。(登録をすすめる画面が出たら、閉じて大丈夫です)
3. スペースキーを押す押すたびに、相性のよい5色が新しく生まれます。まず10回くらい押して、「色の組み合わせには良し悪しがある」感覚をつかみましょう。
4. 気に入った色は 鍵アイコンで固定する色の上にマウスをのせると出てくる 鍵(Lock)をクリック。固定した色は、スペースキーを押しても変わりません。「1色固定して、残りを回す」が基本の使い方です。
5. カラーコードをコピーする各色に出ている「2E86AB」のような6桁がカラーコードです。クリックするとコピーできるので、Figmaの Fill に貼り付けて使います。

5色のうちから「ベース(うすい色)1 + メイン1 + アクセント1」の3色を選び出せば、配色の完成です。

コントラスト(読みやすさ)の確かめ方: 文字色と背景色の組み合わせが読みやすいかは、「WebAIM Contrast Checker」(検索で出ます)で確かめられます。2色のカラーコードを入れるだけで、合格(Pass)か不合格(Fail)かを判定してくれます。おしゃれでも Fail のデザインは、仕事では使えません。

課題: 「暖かいパン屋」「清潔な歯医者」「楽しいゲーム屋」の3つのお題に、Coolorsでそれぞれ3色(ベース・メイン・アクセント)を選び、「なぜこの色か」をひとことずつ添えて提出する。

プロとアマの差が一番出るのは、色でも書体でもなく余白だと言われます。

• 余白は「何もない場所」ではなく「グループ分けの道具」(4原則の近接の応用)です。
• 8の倍数(8px、16px、24px…)で余白を決める「8ポイントグリッド」という実務の定番ルールを使います。
• 視線の流れ(Z型・F型)に合わせた情報の置き方を学びます。

課題: わざと余白がバラバラに作ってある練習素材 「パンの森」残念デザイン (zannen-design.html) を直します。リンクを右クリック →「名前を付けてリンク先を保存」で保存し、VS Codeで開いて、CSSの余白と文字サイズを8の倍数ルールでそろえてください。直すのはCSSだけで、見ちがえるほど変わります。

Step 2 で触ったFigmaを、仕事の道具として使いこなします。

• オートレイアウト: 中身に合わせて自動で広がる部品の作り方。使い方は、要素を選んで Shift + A を押すだけ。文字を増やすと箱がついてくる、を実際に見ると一発で分かります。
• コンポーネント: ボタンを1つ直すと、全部のボタンが直る「親子」の仕組み。部品を選んで Ctrl + Alt + K で親を作り、コピーして使います。親の色を変えて、子が全部ついてくるのを確かめましょう。
• デザインカンプ(完成見本): 「この通りに作ればよい」レベルまで仕上げた設計図。コーダーへの「指示書」でもあるので、色や余白の数値がきちんとそろっていることが大事です。

課題 (卒業制作の準備運動): 卒業制作の見本カンプ mihon-lp.png の「ヘッダー〜キャッチコピー」の部分だけを、オートレイアウト (Shift + A) とコンポーネント (Ctrl + Alt + K) で組んでみる。この部分練習をしてから卒業制作に入ると、ぐっと楽になります。