【Webデザイン】デザインの言語化できると良いらしい

どうも、くまだ です。

私はコーディングをメインにWeb制作をやっているのですが、ごくまれにデザインもします。

デザインをするにあたって、「そのデザインに対して言語化できる」・「人に対してそのデザインの説明できる」と良いらしいという話を小耳に挟みました。

コーディングと違って、デザインは正解はないと言われていますが、それでも世に出ているいろいろなデザインを参考にして自分なりの正解を見つけることはできます。

その一環で、自分のデザインを説明できるようになっておくと、なんとなく配置しただけのデザインよりも説得力があるかなと思います。

自分なりに説明できるものだと、やっぱり自分が過去に作成したポートフォリオが一番説明できるはず。なので、自分のポートフォリオを例に説明してみようと思います。(私個人の主観が入ってしまいますが)

ポートフォリオのデザイン説明:配色

デザイン

まず、配色を緑系にした理由から。

ベースカラーなどでよく見かける汎用的な色だと、

  • グレー系

などがあるかなと。この辺りは王道だし定番だと思います。

ですがこのポートフォリオを作成しようと思った当時は、あえてそれらをベースカラーにはせずに、自分が好きな色(緑系)を使いました。

また、アクセントカラーとしてベースが緑系なので、紅葉の色、つまり赤やオレンジを使用しました。こちらは、後述するサイトの雰囲気を決めてから決めた気がします。

ポートフォリオのデザイン説明:サイトの雰囲気

緑の雰囲気にあうサイトってなんだろう…と一考した結果、洋風より和風テイストが合うかな、ということでデザインの雰囲気は和風系で攻めることにした、、、はずです。

和風テイストで行くことに決まった後、上述したアクセントカラーを紅葉の色(赤、オレンジ系)にしようと決めました。

和風テイストで緑は、安直かもしれないですが、とくに気にせず、ポートフォリオサイトを「一つの世界観で構築する」意味ではそれでいいや、と思いました。ベースカラーで決めた緑は、よくある彩度が高いものではなく、落ち着いた感じのトーンにしました。

ちなみに、私の趣味が散歩なので(じじくさい、、、)散歩ついでにたまにとる散歩風景の写真を画像にしました。

ポートフォリオのデザイン説明:フォント

見出し

和風テイストなので、縦書きも使いたい。

でも全部縦書きは難しそう、ということでタイトルぐらいは縦書きにしてみようという感じで縦書きにしました。背景の色に紛れてパッと見、見えないと困るので、タイトルの背景に、背景色とは違う緑を配置して見やすくしてみた、という感じです。

フォントの種類も和風テイストに合わせて游明朝を使用。

また、サイト全体の世界観を壊さないように、なるべく横文字(英語)は使わないように心がけました。和風テイストであることと、サイトを訪れる人は日本人を想定していたからです。

横文字は読み飛ばされるし、使ったとしてもあくまで装飾程度にとどめようと思いました。(結果、コンテンツの背景に横文字を挿入するなどは使わず)

ポートフォリオのデザイン説明:コンテンツ

ここまでくれば、あとは中のコンテンツを決めるだけです。

ポートフォリオなので、自分の紹介やスキル、実績など自分のことを知ってもらうためのコンテンツにしました。ポートフォリオの型はだいたい決まっているので、こちらはそれになぞるように配置しました。

  • 自分の簡単自己紹介
  • スキル
  • 実績
  • お問い合わせ

上記に加えて、ブログもやっていたのでブログもコンテンツの一部として活用、、、という感じで配置しました。

実績などは、ただサイトのリンクや画像を載せるだけよりも、かかった時間や難しかった点とそれに対してどう対応したか、など簡単な説明も載せてみた、という感じです。

デザインの言語化って難しい

というわけで、超ざっくり自分が作成したポートフォリオについて説明してみました。細かいところ(余白とか)は覚えていないんですが、大枠は上で述べたようなプロセスで決定したのは間違いない。

ポートフォリオだけではなく、それ以外で自分が作成したデザインを言語化できるようになると、クライアント様に説明を求められたとき説明できるようになるといいかもしれません。例えば、クライアント様がこういうデザインがいい(ただただかっこいい、オシャレという理由で選んだ参考サイト)とあったとしても、それとユーザーが使いやすいかどうかはまた別問題。

なので、そういうときに、「いや、ここはこういうデザインのほうがいいです、なぜかというと…」.みたいな感じで説明できるといいかも。

説明できるってことは、分析ができているわけなので、説明できる分析力が養われるので一石二鳥です。

ここまで読んでくださりありがとうございました。

この記事を書いた人