Webの最新トピックを配信中!

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

コーポレートサイトのデザイン

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

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

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

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

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

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

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

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

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

コーポレートサイトのデザイン

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

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

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

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

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

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

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

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

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

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

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

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

コンテンツ幅

1600pxの場合

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


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

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

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

配色


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

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

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

フォント

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

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

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

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

「Times New Roman」は、美しいセリフ体のフォントです。
「Times New Roman」と「Georgia」の2つは、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デザインでは「8の倍数」という説があり、コンテンツ幅や余白、フォントサイズなどを8の倍数の値にしておくと綺麗にまとまると言われています。8が適用できなければ4の倍数でも良いそうです。例えば大見出しを40px、中見出しを32px、本文テキストのサイズを16pxにしたりします。もちろんこれは厳密に守るルールでもなんでもありません。ただフォントサイズどうしようかな・・・と迷う時間が少し減ると思うので試してみてください。当然8の倍数でもうまくいかない場合はあります笑

メインビジュアルの選定

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

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

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

装飾(あしらい)

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

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


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

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

 


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


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

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

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

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

近接
今回のデザインでは、

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

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

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

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

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


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

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

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

コーポレートサイトのサンプル
VRの会社です。グロナビの背景を取りヒーロー画像を上部まで全面に敷きました。画像はUnsplashからです。

コーポレートサイトのサンプル
先進的な家具を販売している会社…ですね、うん。画像はすべてPexelで見つけました。

みなさんもぜひ楽しみながら、写真やテキストを変えていじってみてください♪
テンプレートPSDのダウンロードはこちらから。
コーポレートサイトPSD

コラム①:正社員のWebデザイナーを強くオススメする理由

このサイトでは、
本当にWebデザインのスキルを磨きたいなら、未経験の方はまずはWeb制作会社に正社員で入社すること
を強くオススメしています。

Webの最先端に触れられるWeb制作会社に入社しスキルをガッツリ高めてほしいです。そして、社内では、やはり派遣でもなく、アルバイトでもなく、長く在籍する可能性のある正社員にこそ成長できるお仕事を振ってくれるのです。派遣やアルバイトは、リンク張り替えやテキスト修正など成長しづらい作業をやらされがちです……。

未経験OKで正社員のWebデザイナー・フロントエンドエンジニア案件を多く保有しているのが、IT系に強いワークポートです。Webに強いエージェントは他にもあるし、僕もいくつも登録していますが、ワークポートほど大量に求人案件を紹介してくれるエージェントを他に知りません笑。転職エージェントは複数登録しますが、ワークポートはそのうちのメインエージェントしてぜひ登録しましょう。

『ワークポート』公式サイトへ
コラム②:Webデザイナーを強くオススメする理由

あなたはたぶんエンジニアにはなれません。
だからこそ、このサイトでは、Webデザイナーになることを強くオススメしています。

でも、もし、エンジニアになれれば、月収100万円以上も可能です。実際に僕の友人も軽く年収1000万円は超えています。

ほとんどの人がエンジニアにはなれないので、30〜40万円以上はする高額なプログラミングの学校に行くのはお金をドブに捨てる可能性があります。どうしてもエンジニアになりたい方は、無料でプログラミングを学べるProEnginner開講の学校『エンジニアカレッジ』に行きましょう。エンジニアカレッジは、学校&就職支援の一体型サービスです。ここは本当にありがたい存在です。ソーシャルゲーム大手企業で有給インターンまで可能です。ここで、自分にエンジニアとしての素質があるのかチェックしてください。もし、あなたに才能があったら、最高にラッキーな人生です。20代のみ対象です。もし20代ならこのチャンスをぜひつかんでください。

30歳以上の方は、TECH::EXPERT がオススメです。転職できなければ授業料全額返金してくれます。教室は9時〜22時まで開放し、教室あるいはオンラインでマンツーマンで無制限に質問ができます!超集中なら10週間、ゆったりなら6ヶ月と期間も生活に合わせて選べます。スクールは無数にありますが、有料系ではここが一番爆速に成長できそうです。
参考記事 : なぜ「エンジニア」ではなく「Webデザイナー」をすすめるのか

無料のプログラミング学校『エンジニアカレッジ』の詳細を読む 『TECH::EXPERT』の詳細を読む

Webデザインのご質問やサイトの感想など、お気軽にどうぞ!

みなさまからのコメントを元に記事を作成することありますので、あらかじめご了承ください。
メールアドレスが公開されることはありません。* が付いている欄は必須項目です。

  • 管理人(ねこポン)について

    週3日だけ会社で働く30代前半ウェブデザイナーです!
    インテリ風&仕事できる風を醸し出す腕前では右に出る者はいませんが、電話すら怖くて取れないし、無断欠勤してしまい自宅に警察が来たほどのコミュ症ポンコツ人間です。
    現在Web業界5年目。事業会社とWeb制作会社のウェブデザイナーを経て、フリーランスになりました。

    ★ 僕の20代まるごと黒歴史ストーリー

    最近ちょこっと『月曜から夜ふかし』に出演しました↓

    ★ 『月曜から夜ふかし』にちょこっと出演したら『BizSPA!』さんにインタビューしてもらいました!

  • なんでもWebの質問受け付け中 (^o^) /♪

  • Web制作会社を歩き回れるゲームを作ってみました!ぜひ探検してみてください。(注意:音が出ます!)

    一番上へ