前回の要件定義編に続いてデザイン設計編です。
私はデザイン業務の経験はほぼ無いのですが、フロントエンドをやっていることもあり多少の知見は持っていまして個人開発などでは結構がっつり自分でデザインを作ります。

今回はデザインを作っていく工程でどのように考え、設計していくのかを記載していきます。
詳細なデザインの決め方やテクニック的な話はあまり詳しくありませんし、ほかでいくらでも情報がありそうなのでここでは書きません。

デザインとは

デザインとは表現のための機能です。
ことwebデザインにおいては必要な情報を伝えるための手段・手法と言って良いでしょう。
おそらく所謂「アート」に類するようなもの以外のデザインはそのように言って差し支えないと思います。
この前提に立った時、デザインでするべきこととは「見た目を揃える」ことです。
「見た目」には物理的位置関係・色彩といったあらゆる視覚情報を含みます。
念のため補足すると、ビジネス的な文脈ではIA等デザインとは切り分けて語られる分野もありますが、この記事ではそれらを総じてデザインとして扱っています。

では「見た目を揃える」を少し説明すると。
様々な視覚情報からユーザーに与える「印象」をコントロールするという事です。
実際にユーザーが得られる情報そのものや、操作した結果起きる事象についてはコンテンツの内容や機能によって実現されるものです。
デザインはそれらを適切にユーザーに伝えるための補助的な機能です。

加えてサービス提供者がユーザーに伝えたい情報のうち、コンテンツや機能では実現できない部分を表現する役割もあります。
例えばコーポレートサイトに訪れた人がファーストビューを一目見た時に感じる会社の印象等です。
「シンプルだな」とか「デザイン凝ってるな」とか「分かりやすくまとまってるな」とかの第1印象みたいなものを持つと思いますが、それらも基本的にはデザインによってコントロールされるものということですね。

※所謂アート・芸術の類はこの限りではありませんが、本質は限りなく近いものだと考えています

方向性を決める

まずはデザインを作るにあたって、デザインの方向性・方針を決めます。
私はいつも以下の様な順番でDrill downして決めています。

サイト・サービスの目的 → ターゲット像 → ペルソナ例 → コンセプト

それぞれ説明していきます。

サイト・サービスの目的

これは要件定義編の時点で既に言語化されているはずですので、それを使います。
今回は

Jamstack構成のサイトを構築したい
"shin-taro" というエンジニアのスキルを証明できる成果物が欲しい
自身の知見のうち、大手のサイトに投稿しないような内容を気軽に公開できるサイトが欲しい

となっていますね。このうち

Jamstack構成のサイトを構築したい

の部分は明らかにデザインと絡まない部分ですので無視してOKです。

ターゲット像

では上記で上げたサイトの目的から、このサイトを見てほしいターゲットの人物像を考えていきます。

まず、技術ブログを作ることは決まっていますから、「エンジニア」は必ずターゲットに入るでしょう。これは

自身の知見のうち、大手のサイトに投稿しないような内容を気軽に公開できるサイトが欲しい

の部分にもマッチしますね。

続いて

"shin-taro" というエンジニアのスキルを証明できる成果物が欲しい

に関して、これはどちらかというと今後のキャリアを見据えて副業や転職等の際に活用したいというニュアンスですね。

ターゲットの属性としては

• エンジニア
• 採用関係者
• その他

と振り分けましょう。

また、ここで訪問パターンも考えておきましょう。
今回は言及しませんが、細かいデザインや機能詳細を考える際に有用になります。

• エンジニアが開発中に詰まった際、キーワードで検索してヒット
  • PCで該当記事に直接訪問
• エンジニアが情報収集のためにキーワードで検索してヒット
  • SPまたはPCで該当記事に直接訪問
• エンジニアが情報収集のために新着やおすすめなどから訪問
  • SPが多そうで該当記事に直接訪問
• 自分に興味を持った人がSNSとか何かしらのURLを踏んで訪問
  • PCが多そうでTOPページに訪問

ペルソナ設定

最後にここまでで洗い出したターゲット像をもとに、できるだけ具体的で典型的なペルソナ像を設定します。

まず、前段で考えた人物像の特性を詳細に書き出してみます。

• エンジニア
  • 自分と同じくらいから下のレベル感のエンジニア
  • フロントエンドまたはweb系でフロントエンドも触る、興味ある人
  • エンジニア歴2~5年くらい
  • 30代前半くらいまでの比較的若い層
  • 男女問わず(エンジニアなので男性比率高め)
  • タイトルみて軽く見に来る感じ
• 仕事の依頼とか求人関連で見に来る人
  • 主に人事かベンチャーの代表クラス
  • 前者の場合技術にそこまで強くない
  • スキル感とか活動内容を見に来る

ここからさらに具体的にして所謂ペルソナというやつにします。
本当は属性ごとに設定してゾーニング的なことをしたほうがより良いのですが、今回は「仕事の依頼とか求人関連で見に来る人」はおまけ程度なので、エンジニア向けにだけ考えていきます。

20代後半、日本でフロントエンドエンジニアをやっている男性。趣味はインドアで個人開発などもしている。エンジニアリングに関わる情報を仕事以外でも収集していてネットサーフィン多め。ダークモード好き。

という感じにしてみました。ほぼ私です。
前段で洗い出したターゲット人物像にマッチしていて、十分に具体的であればなんでもいいと思います。
もっと具体的に年収帯や家族構成だったりもあったほうが良いですが、今回のサイトには必要ない情報なので割愛しています。

コンセプト決め

ここまでターゲット像を具体化できれば、あとはデザイン全体のコンセプトを決めていきます。
最終的に決めたコンセプトは以下の様な感じです。

シンプルで見やすく
色も少なめ。再度のある色は1か2くらい
ダークテーマをデフォに。
記事本文以外の情報量は最小限に

ユーザーは記事本文に書いてある情報を求めて見に来ることがほとんどなので、特にシンプルさに重きを置いています。
ダークテーマは設定したペルソナ像をもとにしていますが、エンジニアはみんなダークモード好きという偏見に基づいた完璧なロジックです。

まとめ

このようにしてコンセプトが決まれば、あとはコンセプトにあったワイヤーの作成(IA設計)だったり、カラーパレットやエレメントの選定をしていけばおのずとそれっぽいデザインに仕上がっていきます。

次は技術選定編とかをやろうかなと思います。