おすすめのWebデザイン&プログラミングスクールを一部紹介!主要なスクール23校は『Webデザインスクールの一覧』でチェックしましょう。
ポートフォリオに掲載する作品がないよ!という方のために、作品を水増しする方法を紹介します。
それは、ファーストビュー(モニターで最初に表示される箇所)のみの架空サイトのデザインを作る!という方法です。
それなら、サイト一個まるまる作る必要がないので、作品を量産できますよね。
今回は、上のコーポレートサイト(企業サイト)のデザインを一緒に作っていきましょう!デザインの意図について解説していきます。
デザインデータ(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〜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の両方にインストールされているフォントで、たまにデザインで使います。
明朝体とゴシック体はご存知だと思いますが、欧文フォントでそれに対応するのがセリフとサンセリフです。
欧文フォントの選び方がわからないよ〜となりがちですが、フォントの知識がまだない時期は、とりあえず有名なフォントを選ぶとハズレが減ります。見知らぬフォントの使用は控えましょう!
セリフならこちらがド定番です。現場でしょっちゅう使います。
サンセリフならこちらが有名。この中から選びましょう。
欧文フォントは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になると有料の場合もあるのですが、この写真については全サイズが無料でした。ラッキーです。
最近はヒーロー画像を大きくドーン!と配置するデザインが一般的になってきたので、とりあえず素材サイトで見つけた写真をドーン!と置いて終わり!となりがちです。
写真自体がヒーロー画像として意図を持って撮影されたものなら良いですが、素材サイトから持ってきただけの場合も多いので、何らかの装飾(あしらい)をして、ヒーロー画像に意味を持たせる必要があります。
てゆうか、そのままじゃ手抜き感が出ちゃいます。
都市設計の会社なので、「都市を科学的に分析する」演出として、幾何学模様のテクスチャを配置してみました。
この素材は、まさかシェイプやペンツールで自分で書いたわけではありません。そんなのめんどいですもん・・・。
particles.jsというサイトで、粒子と線がつながったアニメーションを生成できます。本来はコーディングのためのサイトで、ここで生成したアニメーションをサイトの背景に表示します。
白背景にグレーの粒子と線の状態を設定し、それをキャプチャし、こんなふうにヒーロー画像の上にペタリと乗せます。
そして、レイヤーの描画モードを「除算」にすると、背景の白色が消え、粒子と線だけがくっきりと残りました。ちょっと薄いのでコピーして2枚重ねています。
描画モードは「乗算」と「スクリーン」はよく使いますが、他の描画モードも便利なのでいろいろ試してみてください。
安心してください。僕もどういう原理でこうなっているかほとんどわかりませんから笑。
「近接」「反復」「強弱」「整列」のデザインの4原則を紹介します。
この4つを守るとデザインに安定感が出ます。
1.近接
「近接」は、関連する要素はグループとして捉えて近くに配置し、周囲に十分な余白を作ることです。
要素がどこに属しているのかを明確に見せるためのルールです。
今回のデザインでは、
これらが対象です。隣接する要素には十分に余白を設けていますよね。
全然難しいことではないのですが、デザインに慣れてないうちは、要素間が狭くなり、どの要素がどこに属しているのか判別できず、ごちゃごちゃした印象を与えがちです。
2.反復
「反復」は、見た目が同じか近い構造を繰り返すことでデザインに一貫性を持たせることです。
今回はファーストビューとセカンドセクションのみなので、あまり反復要素はないのですが、例えばNewsとServiceの見出しは同じ色とフォントサイズですよね。これも要素の繰り返しで、一応「反復」です。見出しのデザインは統一されているわけです。News内の各ニュースも当然同じ見た目のリストで「反復」されています。
一つのページの中で、可能な限り、近い構造を繰り返すことで、そのページのデザインの一貫性を保ちます。
デザインに不慣れなうちは、ついついセクションごとに見た目がバラバラになりがちです。
3.強弱
「強弱」は、要素同士の優先順位をつけ対比を生む方法です。主に見出しと本文テキストの関係で語られることが多いです。
「ジャンプ率」もよく現場で使う単語ですが、本文テキストに対する見出しのフォントサイズの比率のことを指します。見出しと本文テキストのサイズがほぼ同じだと、「ジャンプ率が小さい」ことになります。適度なジャンプ率にして対比を生むことで、どれが見出しなのか、はっきりとメリハリをつけたデザインにしましょう。
4.整列
「整列」は、要素を揃えることです。「見えない線に揃える」とよく言われます。
Photoshopではこのように必ずコンテンツ幅の左右と中央にガイドを表示して、そこに要素を揃えてデザインします。
テンプレートのPSDでは、すでにガイドは引いてはあります。ガイドの表示/非表示切り替えのショートカットは、Macは「Cmd + : 」、Windowsは「Crtl + : 」です。
新規でガイドを作成する方法はこちらの記事で確認してください。
このPSDテンプレートをいじって、他にもこんなコーポレートサイトのデザインを作ってみました。
VRの会社です。グロナビの背景を取りヒーロー画像を上部まで全面に敷きました。画像はUnsplashからです。
先進的な家具を販売している会社…ですね、うん。画像はすべてPexelで見つけました。
みなさんもぜひ楽しみながら、写真やテキストを変えていじってみてください♪
テンプレートPSDのダウンロードはこちらから。
コーポレートサイトPSD
このサイトでは、
本当にWebデザインのスキルを磨きたいなら、未経験の方はまずはWeb制作会社に正社員で入社すること
を強くオススメしています。
Webの最先端に触れられるWeb制作会社に入社し、スキルをガッツリ高めてほしいです。そして、社内では、やはり派遣でもなく、アルバイトでもなく、長く在籍する可能性のある正社員にこそ成長できるお仕事を振ってくれるのです。派遣やアルバイトは、リンク張り替えやテキスト修正など成長しづらい作業をやらされがちです……。
未経験OKで正社員のWebデザイナー・フロントエンドエンジニア案件を多く保有しているのが、IT系に強いワークポートです。Webに強いエージェントは他にもあるし、僕もいくつも登録していますが、ワークポートほど大量に求人案件を紹介してくれるエージェントを他に知りません笑。※現在はコロナの影響でワークポートですら未経験OKの求人が少ない状況です。ただ、少しでも選択肢を増やすために、また今後状況が改善されてきた時のために登録しておきましょう。
↑ワークポートさんに会ってきました!ねほりはほりと質問をぶつけています。ぜひ読んでみてください。
転職エージェントは複数登録しますが、ワークポートはそのうちのメインエージェントして必ず登録しましょう。
エンジニアになるのは本当に難しいです。
だからこそ、このサイトでは、Webデザイナーになることを強くオススメしています。
でも、もし、エンジニアになれれば、月収100万円以上も可能です。実際に僕の友人も軽く年収1000万円は超えています。
ほとんどの人がエンジニアにはなれないので、30〜40万円以上はする高額なプログラミングの学校に行くのはお金をドブに捨てる可能性があります。
どうしてもエンジニアになりたい方は、無料でプログラミングを学べるProEnginner開講の学校『プログラマカレッジ』に行きましょう。プログラマカレッジは、学校&就職支援の一体型サービスです。ここは本当にありがたい存在です。ソーシャルゲーム大手企業で有給インターンまで可能です。
無料のプログラミング学校はもう一つ、『GEEK
JOB』があります。就職率97.8%と驚異的な数字を出しています!よりエンジニア色の強いカリキュラムを受けたい場合はこちらを受講します。
2校ともオススメです。無料見学をしてみて自分に合いそうな雰囲気の学校を選びましょう。
この2つの学校のどちらかに通って、自分にエンジニアとしての素質があるのかチェックしてください。もし、あなたに才能があったら、最高にラッキーな人生です。20代のみ対象です。もし20代ならこのチャンスをぜひつかんでください。
30歳以上の方は、『テックキャンプ エンジニア転職』
がオススメです。転職できなければ授業料全額返金してくれます。教室は9時〜22時まで開放し、教室あるいはオンラインでマンツーマンで無制限に質問ができます!超集中なら10週間、ゆったりなら6ヶ月と期間も生活に合わせて選べます。スクールは無数にありますが、有料系ではここが一番爆速に成長できそうです。
参考記事 : なぜ「エンジニア」ではなく「Webデザイナー」をすすめるのか
おすすめのWebデザイン&プログラミングスクールを一部紹介!主要なスクール23校は『Webデザインスクールの一覧』でチェックしましょう。
スクール名 | 料金 | 授業形式 | ジャンル | 就職支援 |
---|---|---|---|---|
![]() 求職者支援訓練 ハロートレーニング |
無料 (教材費のみ) |
通学 (約6ヶ月/週4〜5日) |
Webデザイン | ハローワークによるサポート |
![]() |
||||
一番おすすめのスクールは国の運営する求職者支援訓練(ハロートレーニング)です。授業料が無料!しかも約6ヶ月という期間がWebデザインの基礎スキルを習得するのに十分な長さです。僕自身も求職者支援訓練を経てWebデザイナーになりました。 失業保険が受給できる方は職業訓練がおすすめです。期間が約3ヶ月と短くやや理解が浅くなる点は不安ですが、復習や独学で補えれば問題ありません。最近は数は2校ほどで少ないですが6ヶ月コースも登場しました! 参考記事:【無料】職業訓練でWebデザインを学ぶ |
スクール名 | 料金 | 授業形式 | ジャンル | 就職支援 |
---|---|---|---|---|
![]() LIG |
有料 (¥450,000 〜) |
通学 (6ヶ月) |
Webデザイン | 転職セミナーあり/LIGへの採用実績もあり |
![]() |
||||
金銭的に余裕があればLIGを検討しましょう。超有名Web制作会社LIGによるWebデザインスクールです。現役のプロデザイナーが講師で、Mac&デュアルディスプレイという最新設備で学べます!LIG運営のコワーキングスペースも無料で使い放題。生徒のレベルによってはLIGへの就職も可能です。 |
スクール名 | 料金 | 授業形式 | ジャンル | 就職支援 |
---|---|---|---|---|
![]() CodeCamp デザインマスターコース |
有料 (¥148,000 〜) |
オンライン (2ヶ月〜) |
Webデザイン | キャリア支援あり (就職エージェントの紹介) |
![]() |
||||
CodeCampはオンラインのWebデザインスクールです。低価格ながら講師から直接指導とフィードバックを受けられるのが最大の特長です!おすすめのコースは「デザインマスターコース」。コスパ重視で講師と対話しながら学びたい人に最適なスクールです。 |
スクール名 | 料金 | 授業形式 | ジャンル | 就職支援 |
---|---|---|---|---|
![]() プログラマカレッジ |
無料 | 通学 | プログラミング | あり |
![]() |
||||
『プログラマカレッジ』は20代限定の通学式で完全無料のプログラミングスクールです。無料なのでエンジニアになりたい方はぜひ挑戦してみてください。スクール側は就業先の企業からお金をもらうことで無料で運営をしています。とはいえ授業の質は高いと評判です。『プログラマカレッジ』の卒業生による体験談記事はこちらです。 |
スクール名 | 料金 | 授業形式 | ジャンル | 就職支援 |
---|---|---|---|---|
![]() GEEK JOB |
無料 | 通学 | プログラミング | あり |
![]() |
||||
上で紹介した『プログラマカレッジ』と同様の20代限定の通学式で完全無料のプログラミングスクールです。プログラマカレッジは決まった時間に通学しますが、GEEK JOBは個別指導なので自分のペースで通学できます。エンジニアになりたい方は、自分の生活スタイルに合わせてどちらのスクールに行くか検討してみましょう。就職率97.8%は驚異的です! |
ねこポンさん
初めまして。
のがほと申します。
副業Webデザイナーを始めようと思い11月からオンライン講座で勉強を始めました。
LPはXDで模写程度しかしたことがなく、Photoshopはバナーの作成程度です。
ねこポンさんはWebサイト作成にPhotoshopを使用されていますが、初学者はXDではなくPhotoshopで練習した方がよろしいでしょうか?
のがほさん、はじめまして。
僕は現在はXDとPhotoshopの両方を利用しています。どちらかと言うとXDの使用頻度の方が高くなってきました。
引き続きXDでデザインの練習をしていって大丈夫ですよ。バナーやサイトのメインビジュアル部分など凝ったビジュアル部分は必要に応じてPhotoshopで制作していけばOKです。
現在はシンプルなUIが求められる時代なので、今後もXDがメインのデザインツールとして使われていくはずです。
たまにコーディングを担当する時に、デザインデータがPhotoshopで来る時もあります。その時にPhotoshopをきちんと扱えれば大丈夫です。
副業案件が獲得できるといいですね!またご質問などあればいつでもコメントをください^^
ねこポンさん
ご丁寧にご返信頂きありがとうございます。とても安心しました。
PhotoshopとXDの勉強をきちんと続けて案件獲得出来るよう頑張ります!
ねこポンさん
はじめまして、daisuke_kudoと申します。
私は紙媒体のデザイナーをしておりました。家族の大黒柱として企業に属して働いてきましたがコロナ禍の影響により、リストラされました。webデザイナーとして再就職するために現在オンラインスクールを受講し勉強中です。自習の為にテンプレートを使用させていただきます。
また、ねこポンさんのサイトを拝見させていただき、自分の思い悩んでいたことが馬鹿馬鹿しく思えて、気持ちが吹っ切れました。ありがとうございます。
daisuke_kudoさん
それは大変でしたね…。コロナの影響は紙媒体にも及んでいるんですね。
でもWebデザイナーという新しい目標ができてよかったです。テンプレート、活用してやってください。
このサイトが少しでも励みになったのなら嬉しいです。オンラインスクール、楽しみながら頑張ってください。質問やお悩みなどあればいつでもコメントをください^^
ねこポンさん、心が温まるコメントをいただきありがとうございます。
大変嬉しく思います!そうですね、オンラインスクール楽しみながら勉強します。家族がいる身ですので早く再就職しないといけないと焦っていますが、今が学べるチャンスだと思いながらがんばります。
ちなみに以前ねこポンさんが出演されてた「月曜から夜ふかし」拝見してました^^
視聴していた当時は、ねこポンさんの事を知らなかったので、凄い人だなという感じで見ていたのとネットって凄いけど怖いなと感じた事を思い出しました。