Webデザイナー向けポートフォリオチェックリスト84項目。ここを直せば一気に良くなる！
こんにちは！「未経験からWebデザイナーへ！」を運営しているWebデザイナーのねこポンです。
「うぉ〜〜〜い！...惜しい！このポートフォリオのままじゃ就職できないかも…ここを直したらグッと良くなるのに〜！惜しいよ〜！」
今までWebデザイナーを目指す人のポートフォリオをレビューしてきて何度もそう感じてきました。
たくさんのダメ出しをしてきましたが、共通する改善点があることに気づきました。このnoteでは、ポートフォリオについて絶対に確認してほしい改善点をチェックリストとしてまとめました。詳しく解説していきます。合計27,000文字以上の大ボリュームです。
各チェック項目の内容を改善すれば、一気にポートフォリオの質が上がるはずです。以下の対象の人にはぜひ読んでほしいです。
未経験からWebデザイナーを目指す人が対象です。
・これからポートフォリオを制作する人
・ポートフォリオを制作してみたけど不安な人
・すでにポートフォリオを制作して転職活動中だがうまくいっていない人
・ポートフォリオを活用してフリーランスとして営業活動をしたい人
・デザインスキルを向上させたい人
最初にデザインの改善点をお伝えしていくので、このチェックリストを読み込むことでデザインスキルの向上も期待できます。
コーディングについても気をつけるべき点を確認できます。
ポートフォリオ自体についても改善点をお伝えしていきます。
周りにポートフォリオをレビューしてくれる人がいない方にもオススメです。このチェックリストでセルフチェックをしてみてください。
チェックリストは、デザイン43項目、コーディング20項目、ポートフォリオ21項目の構成です。
大ボリュームなので、１項目ずつゆっくり読みながらご自身のポートフォリオを改善したり作っていきましょう。
ポートフォリオについての基礎知識については、まずは無料記事「【完全解説】Webデザイナー用のポートフォリオの作り方」を読んでみてください。
ポートフォリオの質が低いと、選べる企業の選択肢が減ってしまいブラック企業に入ってしまう可能性があります。
フリーランスとして活動する上でも、ポートフォリオも質が低いとなかなか案件が獲得できなかったり、報酬が低いままになってしまいます。
少しでもポートフォリオの質を上げて、優良企業に入ったり、良い案件を獲得できるようになりましょう！
※各項目はあくまで私の主観のため、一つの見解として参考にしてください。必ずしも常にあらゆる状況で正しいとは限りません。
【デザイン】
ポートフォリオに掲載する各作品のデザインについてのチェックリストです。
もしポートフォリオ自体をご自身で制作している場合は、ポートフォリオのデザインについても参考になるので合わせてチェックしてみてください。
1. ドロップシャドウが強すぎないか？
枠を囲む際などに使用されるドロップシャドウが濃すぎて強すぎるデザインをよく見かけます。
ドロップシャドウが濃いと野暮ったく見えてしまうのと、中身のコンテンツよりもドロップシャドウの方が目立ってしまいます。ドロップシャドウは、ほんのりかけるようにしましょう。
2. テキストシャドウが強すぎないか？
ドロップシャドウと同様に、テキストのシャドウも濃すぎないように気をつけましょう。テキストシャドウもほんのりかけるようにしましょう。
3. 角丸が中途半端でないか？
角丸が丸すぎたり、逆に丸みが全然無いと中途半端な印象を与えます。基本的には角丸は丸めすぎないようにしましょう。
あえて、しっかり丸めるデザインもありえるので、その場合はこのパーツ以外のパーツも丸みを持たせるなどしてサイト全体のテイストに合わせるようにしましょう。
4. その線は本当に必要か？
線を多用すると窮屈でクドい印象を与えてしまいます。線の代わりになるパターンをいくつか覚えて使いましょう。デザインテイストに合わせて、どのパターンを採用するかを検討しましょう。
線はクドく見えます。上のように背景色だけでも十分です。
十分に余白があれば線は必要ありません。
線の代わりにドロップシャドウでもOKです。
どうしても線を引くのであれば薄い線にしましょう。
サイトのデザインテイストに合わせて、あえて太い線を引くのもアリです。
5. デザインの４原則を理解してデザインしているか？
デザインの４原則「近接」「整列」「強弱」「反復」を理解せずにデザインしている作品をよく見かけます。必ずこの４原則は押さえておきましょう。
以下の２つの書籍のうちどちらかは読んでおきましょう。４原則とその他にもデザインのルールが詳しく解説されています。
定番の書籍がこの『ノンデザイナーズ・デザインブック』です。第４版になり日本語のサンプルデザインも掲載されるようになりましたが、多くのサンプルが英語なのでちょっとイメージしづらいかもしれません。
もし『ノンデザイナーズ・デザインブック』がとっつきづらければ、以下の書籍『デザイナーじゃないのに！』がすごくオススメです。
漫画で楽しみながらデザインのルールを学べます。あっという間に読み終えちゃう書籍ですが、しっかり学べる良書です。
デザインの４原則は極めて重要です。これを意識したデザインができると素人感あふれるデザインから脱却できます。必ず覚えておいてください。
6. デザインの４原則「近接」は押さえているか？
「近接」は、関連する要素をグループ化して近づけて配置することです。近接をすることで情報が整理されて見やすいデザインになります。
上のNG例では名前や会社名、住所などがバラバラに配置されており見づらいです。これらを近づけてグループ化して余白を設けて配置することで見やすいレイアウトになりました。
このように「近接」を押さえたデザインをしているか確認してください。
7. デザインの４原則「整列」は押さえているか？
「整列」は、揃えて配置することです。要素がバラバラで揃っていないと視線をやたらと動かすことになり目と脳が疲れてしまいます。揃えて見やすいデザインにしましょう。
このように「整列」を押さえたデザインをしているかを確認をしてください。
また、つい中央揃えを多用してしまっている作品を見かけます。ロゴや見出しを中央に揃えるのは自然ですが、なんでもかんでも中央揃えにすると揃っていないバラバラな印象を与えてしまいがちです。中央揃えは難易度が高いです。特に中央揃えにする理由が無ければ、左揃えにしましょう。
8. デザインの４原則「強弱（対比）」は押さえているか？
「強弱」は、優先すべき要素を目立たせてメリハリをつけることです。「対比」とも言われます。
ここでは値段を強調するために強弱をつけて文字を大きくしています。
「強弱」を押さえたデザインをしているか確認をしてください。
また「強弱」に関連して、「ジャンプ率」についても確認しておきましょう。ジャンプ率とは、主に見出しと本文の文字サイズの比率のことを指します。ジャンプ率が低すぎて見出しのインパクトが欠けているデザインが多いです。見出しの文字サイズが小さすぎます。ある程度、見出しと本文の文字サイズのジャンプ率を高めて、見出しをしっかり目立たせましょう。
ジャンプ率は常に高ければOKというわけではありません。高級感のある落ち着いたデザインの場合はあえてジャンプ率を低くすることもあります。
9. デザインの４原則「反復」は押さえているか？
「反復」は、同じ要素をパーツとして繰り返して使用することでデザインに一貫性を持たせて内容を理解しやすくすることです。
同じ要素であれば同じデザインにしてパーツとして繰り返し用いるようにしましょう。
このように「反復」を押さえたデザインをしているか確認をしてください。
10. 十分な余白はあるか？
文字や画像などの上下左右に十分な余白が無いと窮屈な印象を与えます。十分に余白を作ってあげてください。
ここから先は
¥ 500
この記事が気に入ったらチップで応援してみませんか？