10 Essential Web Design Principles
Abstract
こんにちは、RESONATEの本居（もとおり）です。
今回はジュニア〜デザイナーのみなさん 向けにweb design の基礎をまとめさせていただきました🙋♀️メモ程度にお気軽にご覧いただけますと幸いです.. !
Tools
XD もしくは Figma を想定
今回はどちらの環境下でも転用可能なものを記載して参ります。
01｜まずはクライアント（or 自社）のBrand Essentialを紐解く
クライアントもしくは自社のpurpose, philosophy ( or vision ), mission, values, statement, tagline を言えますか？
先方、もしくは自社のブランドガイドラインは読み込みましたか？
少なくともロゴ、カラー、フォント、タイプフェイス、トーン＆マナーにかかるものは読み解いておきましょう
また、この時点でアセットやコンポーネントとして上記を登録しておきましょう
02｜目的と制作条件を明確に
サイトの制作目的は何でしょうか？
目標となる指標は何か見えていますか？
CVR, 直帰率, 回遊率, お問い合わせ率 etc..
優先順位もディスカッションできているとベストです
先方からいただいている資料や、オーダーは明確になっていますか？
SP/PC どちらからの流入比率が多いですか？
ブレイクポイントはどうするか、エンジニアと握れていますか？
03｜グリッドに正確に
一番最初にグリッドを敷きましょう
全てを4で割り切れる数字で構成されるのがおすすめです
webデザインにおいては奇数の値は発生しません
04｜デザインは考え方（切り口）違いで制作
ポイントは考え方（切り口）を違う方向から行う、ということ
ただのデザイン違い、では提案になりません
事前の条件（ターゲットや仮説）違いで方向をクリエイティブディレクター（もしくはCD相当の責任者）とすり合わせましょう
ロジックでGOが出て初めてムードボードやラフに入れます
事前のすり合わせを飛ばしてしまうと徹夜のリスクが発生してしまいます。健康的に仕事を進められるように、前段であればあるほど細かく合意形成を行うのがオススメです.. !
05｜キービジュアルはメッセージから発想し、制作
KVもデザインの考え方と同じく、ただのデザイン違い、では提案になりません
ラフや実制作に入る前に、どのようなメッセージを以て何を伝えたいのか？狙いは何なのか？を明確にしてから制作へ臨むのをオススメします.. !
06｜文字/色/コンポーネント管理を綿密に
修正がいつどこへ発生するかわかりません。
少しでも修正を簡便にするために、上記は必ずコンポーネントとして登録しておくようにしましょう
07｜Google Search Consoleのモバイルユーザビリティ厳守
せっかく作ったwebサイトも、デザイン側のミスでクローリング時に不利なSEO評価を受けては意味がありません。
最新のクローリング規定を遵守し、レギュレーション化して制作を進めるのが良いでしょう
08｜まずはWFを精密に起こし、UX精度を先方と検証
この時点でレイアウトFIXができるように設計
精密ver WF はモノクロで起こしましょう
UXにフォーカスして議論を行うため、あえてモノクロで設計します
09｜デザインはとにかく調整しやすいように制作
コンポーネント化 / スウォッチ化 を行い、修正に強いデータづくりを
進捗は都度都度報告
間違った方向に進むのがもったいないため、疑問に思ったことや不安になった瞬間にCDやADに相談すると結果的に手戻りが少なく、時間を有効に使うことができます
10｜入稿データはとにかく判りやすく
手戻りゼロを目指しましょう
アニメーションサンプルをつけるなどし、実装者がデザイナーの意図を齟齬なくわかる工夫をしましょう
こちらのサイトも大変おすすめです：https://coco-factory.jp/ugokuweb/
いかがでしたか？
初めてのnoteなので、読みづらい点もあったかと思いますが、少しでもみなさんのお役に立てれば嬉しいです.. !
もしご質問やご意見、ディスカッションなどがございましたら、い気軽にご連絡くださいませ☕️