【無料PSD付き】ポートフォリオ作品水増し講座

ポートフォリオに掲載する作品がないよ！という方のために、作品を水増しする方法を紹介します。

それは、ファーストビュー（モニターで最初に表示される箇所）のみの架空サイトのデザインを作る！という方法です。
それなら、サイト一個まるまる作る必要がないので、作品を量産できますよね。

今回は、上のコーポレートサイト（企業サイト）のデザインを一緒に作っていきましょう！デザインの意図について解説していきます。

デザインデータ（PSD）は無料でダウンロードできます。（写真等の著作権が関係するデータはPSDから除いています）

こんなふうにテンプレートPSDのメインビジュアルの写真を差し替えたり、フォントを変えたり、レイアウトをいじったりして、自分のオリジナルのデザインを作ってみてください。それで作品が一つ完成です♪

PSDを用意した一番の理由は、テンプレートがあればデザイン的に逸脱したデザインが生まれづらくなると思うからです。
これまでWebデザイナー志望の方のポートフォリオ作品をたくさん見てきました。
せっかく学校や独学でPhotoshopなどのソフトウェアのスキルは身に着けているのに、デザインがイケてなくて、書類選考や面接で落とされてしまっています。それでは悲しすぎますよね・・・。

テンプレートとなるPSDがあれば、最適なコンテンツ幅・配色・使用フォントなどのテクニックが詳しく伝えられます。
まずは模倣というかマネでOKです。そこからオリジナルを作っていきましょう。
また、レイアウト構造や細かい所だとグローバルナビの項目など、自分で考える手間を省けます。けっこうそういう箇所で時間を消費しがちですからね・・・。時間を節約しましょう。

「ファーストビューだけでいいの…？？」と心配な方は下記の記事をお読みください。ポートフォリオと「作品水増し」に対する考え方について詳しく書いています。
ポートフォリオ作品がない方へ。作品を増やす方法を紹介！

解説：コーポレートサイトを作ろう

コーポレートサイトは、過度な装飾が少なく、配色もシンプルなため、もっともノーマルなサイトデザインです。
デザインの基本ルールである「近接」「反復」「整列」「強弱」を学ぶ上で良い教材です。

PSDはこちらからダウンロードしてください。
コーポレートサイトPSD

まずは「コーポレートサイトっぽさ」を考えよう

デザインをする上で、ものすごく大事なことの一つに「ぽさ」があります。
僕はWebデザイナーになりたての頃に、会社の先輩にデザインのレビューをお願いすると、よくこう言われました。

「違和感あるね。なんか“ぽく”ないね」

どこが悪いかを指摘してくれないのです笑。ただ「ぽくない」とだけ言われます。
それは自分で「ぽくない」原因を考え尽くして、自分で改善させるためです。自分自身で改善できないと一人でデザインできるようにはならないからです。
デザインをするときは、いつもこの「違和感」との戦いになります。

コーポレートサイトなら、「コーポレートサイトっぽさ」が必要です。ぽさが無いと違和感が生まれます。
常に手を動かしながら「これ、コーポレートサイトっぽいかなぁ？違和感ないかなぁ？」と自分に問い続けます。

では、「コーポレートサイトっぽさ」は何だろう？と考えます。
1GUUなどのギャラリーサイトで企業サイトを片っ端に見ていくのオススメです。50個くらいボーッと見ていると、いくつかの共通点や出現頻度の高い要素に気づきます。

• メインビジュアルは大きめで横幅はフルサイズ
• メインビジュアルになぜか都市の俯瞰写真が使われているサイトが散見される
• メインビジュアル上にメッセージを配置
• 寒色系の色（青系）が多い
• ロゴは左上が多い
• 右上に「お問い合わせ」ボタンや電話番号がある
• コンテンツは「お知らせ」や「サービス概要」が最初に来る

もちろん現実のコーポレートサイトは多種多様です。ロゴが中央にあったり、自社のコーポレートカラーである赤色や紫色がメインカラーのサイトもあります。都市の俯瞰写真だって一部のサイトのみでしか使われてません。

でも、上でリストアップした要素を組み合わせることで、コーポレートサイトっぽいデザインを作ることができるわけです。
特に、これはポートフォリオに掲載する架空サイトのため、いかにもコーポレートサイトっぽいことが大事です。変にオリジナリティを出すと、そのデザインが素晴らしければ良いですが、「ぽさ」が失われる可能性があるので注意してください。

ガーリーなサイトをデザインするなら、まずガーリーなサイトをたくさん見ることから始めます。そして配色や装飾、フォントの選び方などの共通する要素を頭の中に取り入れて、ガーリーっぽいサイトを作ります。

コンテンツ幅

Photoshopのカンバスサイズは人によって様々ですが、僕の場合は、カンサスサイズの横幅は1600pxで作ります。 コンテンツ幅は、1140px（Bootstrapの横幅）〜1300pxの間でわりと自由に作ります。今回はコンテンツ幅は1200pxにしています。

コーディング上は、左右にPaddingの40pxの余白を設けたいので、Paddingを含めると1280pxになります。
縦幅は、ファーストビューとセカンドセクションのみなので1200pxと抑え目です。

Photoshopのプリセットで用意されている「Web一般」のカンバスサイズは、1366 x 768pxです。ノートPCの解像度で横幅1366pxのシェアが現在も高いためです。
このカンバスサイズを利用するデザイナーは多いですが、例えば今回のように1200pxのコンテンツ幅の場合は、左右の余白がかなり狭く見えてしまいます。余白も含めてデザインのため、狭いのは個人的には好きではありません。

フルHDモニターに合わせて、カンバスサイズの横幅を1920pxで作る場合もありますが、クライアントがフルHDのモニターでチェックするとは限りません。ちっこいノートPCの場合もあります。なのに、横幅デカめのデザインを送ると、見づらいよ〜、となってしまう可能性があります。
なので、僕はカンバスサイズはほどほどの横幅1600pxにしています。

配色

メインカラーとアクセントカラーは青系でまとめました。アクセントカラーは補色（色相環で反対にある色なので、青色の場合は黄色が補色）などを用いて強い対比を生み出すのではなく、やや色相が異なる青色を採用しています。
コーポレートサイトで少し堅めの企業という設定があるので、極端な色の差異をなくし、落ち着いた印象を出すようにしています。

色については十分に注意してください。
デザインに慣れないうちは、色を使い過ぎます。今回のような堅めのデザインの場合は、使用色は2〜３色以内に抑えてください。
今回の架空のコーポレートサイトの場合は、青など寒色系の色を選んでおくのが無難です。

また色同士のトーンは必ず合わせましょう。トーンを合わせるとは、簡単に言うと、異なる色同士で彩度と明るさを統一するということです。トーンが異なるとチグハグ感を生み出し、汚いデザインに見えてしまいます。
トーンの解説はこちらの記事が詳しいです。

フォント

このデザインではこれらのフォントを使用しています。

ロゴ：Helvetica Neue（Mac標準）
本文のテキスト：ヒラギノ角ゴ（Mac標準）
見出し（NewsとService）：Open sans （Google fonts）
メインビジュアル上の英語テキスト：Times New Roman（Mac/Windows標準）

「Helvetica」と「ヒラギノ」、この２つのフォントはデザインに必須のフォントです。
Macにはプリインストールされていますが、残念ながらWindowsには入ってません。しかも普通に買うと高いです・・・。Windowsで似たフォントで表示したい場合は、HelveticaはArialに、ヒラギノ角ゴは游ゴシックに置換してください。
現在Windowsの方でヒラギノを購入するつもりがなければ、できれば経済的に余裕ができれば、Macを購入してください。ヒラギノはデザイン作業で頻繁に使用しますし、欧文フォントについてもMacには高品質なものがプリインストールされています。

「Open sans」はGoogleフォントなので無料でダウンロードできます。最近使用頻度がすごく高いフォントです。ぜひ入手しておいてください。こちらからDLできます。
Googleフォントのダウンロード方法は下記の記事で解説しています。
Google Fontsのダウンロード方法

「Times New Roman」は、美しいセリフ体のフォントです。
「Times New Roman」と「Georgia」の２つは、WindowsとMacの両方にインストールされているフォントで、たまにデザインで使います。

明朝体とゴシック体はご存知だと思いますが、欧文フォントでそれに対応するのがセリフとサンセリフです。
欧文フォントの選び方がわからないよ〜となりがちですが、フォントの知識がまだない時期は、とりあえず有名なフォントを選ぶとハズレが減ります。見知らぬフォントの使用は控えましょう！

セリフならこちらがド定番です。現場でしょっちゅう使います。

• Garamond
• Baskerville
• Caslon
• Georgia
• Times New Roman
• Bodoni
• Didot
• Trajan
• Lucida
• Rockwell
• Century
• Baskerville
• Playfair Display

サンセリフならこちらが有名。この中から選びましょう。

• Helvetica
• Futura
• Gill Sans
• Georgia
• Verdana
• Frutiger
• Optima
• Lucida Sans
• DIN
• Arial
• Univers
• Myriad Pro
• Impact
• Franklin Gothic
• Avenir
• Open sans
• Gotham
• Montserrat

欧文フォントはAdobeFontsである程度は入手可能です！AdobeCCで何らかのプランに加入していればAdobeFontsが利用できます。無料でフォントを無制限に利用できます！必ず上のフォントたちでダウンロードできるものはゲットしておきましょう。
詳しい入手方法はこちらの記事を参考にしてください。
フォントのお得な入手方法

以前に比べて、高品質なフォントがラクに手に入るようになりました。いい時代になったものです・・・。

おすすめの日本語フォントについては下記の記事で解説しています。こちらもぜひ読んでください。
Webデザインの現場で使う定番フォント

このPSDのように、現場では、本文テキストには「ヒラギノ角ゴ」を使用することがほとんどです。Windowsの方は「游ゴシック」で代用しましょう。企業ではモリサワパスポートという年間フォント利用サービスを契約しているケースがほとんどなので、まともな企業であれば、社内でWindowsでもヒラギノ系（ヒラギノ角ゴとヒラギノ明朝）は使えます。

本文テキストのフォントサイズは14〜16pxです。コーディングの際にブラウザでは10px未満のフォントは表示できないので注意してください。
Webデザインでは「８の倍数」という説があり、コンテンツ幅や余白、フォントサイズなどを８の倍数の値にしておくと綺麗にまとまると言われています。８が適用できなければ4の倍数でも良いそうです。例えば大見出しを40px、中見出しを32px、本文テキストのサイズを16pxにしたりします。もちろんこれは厳密に守るルールでもなんでもありません。ただフォントサイズどうしようかな・・・と迷う時間が少し減ると思うので試してみてください。当然８の倍数でもうまくいかない場合はあります笑

メインビジュアルの選定

メインビジュアルの都市の俯瞰写真は、素材サイトから探します。
ちなみにこの大きなメインビジュアルのことをヒーロー画像と呼ぶので覚えておいてください。

こちらの記事では、現場でよく使う無料素材サイトを紹介しています。
プロのWebデザイナーが使う商用OKのフリー素材サイト
無料の写真素材サイトは、海外サイトでは「Unsplash」「Pexles」「Pixaboy」 、日本サイトなら「写真AC」「PAKUTASO」をよく使います。

今回は「写真AC」を利用しました。写真ACは無料なのにクオリティが高い写真が多いので、頻繁に使わせてもらってます。
「東京」という検索ワードで見つけたこちらの画像を使用しました。S・M・Lと画像サイズがあり、MやLになると有料の場合もあるのですが、この写真については全サイズが無料でした。ラッキーです。

装飾（あしらい）

最近はヒーロー画像を大きくドーン！と配置するデザインが一般的になってきたので、とりあえず素材サイトで見つけた写真をドーン！と置いて終わり！となりがちです。

写真自体がヒーロー画像として意図を持って撮影されたものなら良いですが、素材サイトから持ってきただけの場合も多いので、何らかの装飾（あしらい）をして、ヒーロー画像に意味を持たせる必要があります。
てゆうか、そのままじゃ手抜き感が出ちゃいます。

都市設計の会社なので、「都市を科学的に分析する」演出として、幾何学模様のテクスチャを配置してみました。
この素材は、まさかシェイプやペンツールで自分で書いたわけではありません。そんなのめんどいですもん・・・。

particles.jsというサイトで、粒子と線がつながったアニメーションを生成できます。本来はコーディングのためのサイトで、ここで生成したアニメーションをサイトの背景に表示します。

白背景にグレーの粒子と線の状態を設定し、それをキャプチャし、こんなふうにヒーロー画像の上にペタリと乗せます。

そして、レイヤーの描画モードを「除算」にすると、背景の白色が消え、粒子と線だけがくっきりと残りました。ちょっと薄いのでコピーして２枚重ねています。
描画モードは「乗算」と「スクリーン」はよく使いますが、他の描画モードも便利なのでいろいろ試してみてください。
安心してください。僕もどういう原理でこうなっているかほとんどわかりませんから笑。

デザインの4原則に忠実に

「近接」「反復」「強弱」「整列」のデザインの４原則を紹介します。
この４つを守るとデザインに安定感が出ます。

１．近接
「近接」は、関連する要素はグループとして捉えて近くに配置し、周囲に十分な余白を作ることです。
要素がどこに属しているのかを明確に見せるためのルールです。

今回のデザインでは、

• グローバルナビ
• ヒーロー画像内のテキスト
• News
• Service

これらが対象です。隣接する要素には十分に余白を設けていますよね。
全然難しいことではないのですが、デザインに慣れてないうちは、要素間が狭くなり、どの要素がどこに属しているのか判別できず、ごちゃごちゃした印象を与えがちです。

２．反復
「反復」は、見た目が同じか近い構造を繰り返すことでデザインに一貫性を持たせることです。
今回はファーストビューとセカンドセクションのみなので、あまり反復要素はないのですが、例えばNewsとServiceの見出しは同じ色とフォントサイズですよね。これも要素の繰り返しで、一応「反復」です。見出しのデザインは統一されているわけです。News内の各ニュースも当然同じ見た目のリストで「反復」されています。
一つのページの中で、可能な限り、近い構造を繰り返すことで、そのページのデザインの一貫性を保ちます。
デザインに不慣れなうちは、ついついセクションごとに見た目がバラバラになりがちです。

３．強弱
「強弱」は、要素同士の優先順位をつけ対比を生む方法です。主に見出しと本文テキストの関係で語られることが多いです。
「ジャンプ率」もよく現場で使う単語ですが、本文テキストに対する見出しのフォントサイズの比率のことを指します。見出しと本文テキストのサイズがほぼ同じだと、「ジャンプ率が小さい」ことになります。適度なジャンプ率にして対比を生むことで、どれが見出しなのか、はっきりとメリハリをつけたデザインにしましょう。

４．整列
「整列」は、要素を揃えることです。「見えない線に揃える」とよく言われます。

Photoshopではこのように必ずコンテンツ幅の左右と中央にガイドを表示して、そこに要素を揃えてデザインします。
テンプレートのPSDでは、すでにガイドは引いてはあります。ガイドの表示／非表示切り替えのショートカットは、Macは「Cmd + : 」、Windowsは「Crtl + : 」です。
新規でガイドを作成する方法はこちらの記事で確認してください。

オリジナルのコーポレートサイトを作ろう

このPSDテンプレートをいじって、他にもこんなコーポレートサイトのデザインを作ってみました。

VRの会社です。グロナビの背景を取りヒーロー画像を上部まで全面に敷きました。画像はUnsplashからです。

先進的な家具を販売している会社…ですね、うん。画像はすべてPexelで見つけました。

みなさんもぜひ楽しみながら、写真やテキストを変えていじってみてください♪