- 簡単に自己紹介
- 1.デザインの基礎を学ぶ
- 2.必須のソフトを購入・ダウンロードする
- 3.フリー素材をダウンロードする
- 4.他のサイトを真似してサイトを作る
- 5.0から自分のサイトを作る
- まとめ：根気強く続けよう
ウェブデザイナーという道に進んでから、自分の力で生産するということに喜びを感じるようになりました。
目に見える形で実績が確認できるので自信にも繋がるし、発信したいことがあれば自由にウェブサイトを作ることもできます。
デザインは日常生活の様々なところに溢れているので、ウェブだけでなく印刷やアパレルなど選択肢の可能性も広がります。
今回は、ウェブ業界に興味のなかった私が、ウェブデザインの会社で働くようになるまでの1年間にどんなことを実行したのか5つのステップでまとめてみました。
ここで書くことは目安として、基本的なウェブサイトを作れるようになるまでの参考として見ていただければと思います。
簡単に自己紹介
その3年目にエンジニアを目指す友人と知り合い、イラストが描けるという理由でウェブデザインの制作を個人的に頼まれたのをきっかけに、徐々ににウェブ業界へ進みたいと思うようになりました。
ウェブデザイナーになると決めてからはイラストそっちのけでデザインの勉強を始めましたが、就職活動が始まるまで1年もなかったので、急いでポートフォリオサイトを作りました。
ウェブデザイン会社に就職や転職するとなると、書類選考や面接の段階でポートフォリオの提出を求められることがあります。
そのために私はポートフォリオサイトを作って自分をアピールしました。下手でもなんでも、やる気があります！というのを伝える手段にもなります。
それでは、ウェブデザインを独学で習得するためのステップをご紹介します。
1.デザインの基礎を学ぶ
デザインを作り始める前に、これからウェブデザインを始められる方は、まずデザインの基礎について勉強された方がいいと思います。
デザインの参考になるサイトはたくさんありますので、自分がどういうデザインを好む傾向があるのか、そのサイトのどこがいいと思うのか、逆に見辛いサイトはどこが悪いのか、スマホで見た時とPCで見た時はどう違うのかなど、分析しながら参考にしてみてはいかがでしょうか。
デザイン参考サイト
Webデザインギャラリー | I/O 3000
シンプルなサイトでギャラリーがとても見やすいです。
縦長のwebデザインギャラリー・サイトリンク集｜MUUUUU.ORG
カテゴリが色・業界・デザインなどで分かれていて、簡単に検索することができるので使いやすいです。
見出しデザイン.com
サイトで使われている様々な見出しデザインが集められたギャラリーサイトです。
デザイン参考書籍
2.必須のソフトを購入・ダウンロードする
デザインに必要なソフト
ウェブデザインに使用されるソフトで有名なものが、PhotoshopとIllustratorです。どちらもAdobeという会社のソフトで、1ヶ月の体験版を公式サイトからダウンロードすることができます。
写真、画像、デザインの作成、編集などが可能なソフトです。人物写真の背景を切り抜いたり、写真の色調を整えたりとたくさんの機能が詰まっています。Webデザインの制作で最も使われているソフトで、美しいデザインを制作するのに適しています。
ロゴ、アイコン、スケッチ、タイポグラフィ、その他のベクターアートを作成するのに適しています。チラシやポスターなど印刷物の制作に使われることが多く、ウェブデザインではロゴやちょっとしたイラストなどをIllustratorで作成されることが多いです。
まず始めるなら、Photoshopからダウンロードしてみましょう。ウェブデザインの現場では9割がPhotoshopでデザインするというくらいPhotoshopが使われていました。
Illustratorは、ロゴやポスターなどグラフィック関連で使うことが多いと思います。
コーディングにおすすめのソフト
ウェブページを作成するためには、制作したウェブデザインの画像をパーツごとに切り出し、HTMLとCSSを書いて組み立てる必要があります。ここの作業はコーダーに任せているという会社もありますが、ほとんどのウェブデザイナーはコーディングまで出来るという人が多いです。
現在PCで閲覧されている方は、このページの適当なところで右クリックして「ソースを表示」をクリックしてみてください。アルファベットの意味不明な羅列が表示されたら、それがHTMLです。
これはやろうと思えば普通のテキストエディタでも書くことができますが、HTMLやCSSを書くことに特化したソフトを使えば作業効率が大幅にアップします。私が現在使用しているのは以下で紹介するAtomです。
テーマの種類が豊富で、自分が見やすい画面デザインにすることができるので目が疲れにくいです。またパッケージというものをインストールすることで、自分好みに機能をカスタマイズすることができます。
テキストエディタはデザインソフトのPhotoshopやIllustratorのように決まったソフトがなく、人によって好みが分かれます。
AdobeのソフトにDreamweaver（ドリームウィーバー）というものがありますが、こちらもウェブサイトを作成するためのソフトです。コーディングの他にサイトの管理ができたり、コーディング知識があまりなくても直感的な操作で作成できたりと、初心者でもウェブサイトが作れる便利なソフトです。
しかし私の会社では、複雑な表組みを作ったり、イメージマップを作ったり、「自分でやると少し手間な作業のみDreamweaverでやる」という人が多く、普段のコーディングからDreamweaverでやるという人はいませんでした。
Dreamweaverの機能はとても便利ですが、初心者が使いこなすのは難しく、コーディングの知識が身に付かないので作業スピードが上がらないというデメリットもあるようです。
3.フリー素材をダウンロードする
例えば、おしゃれなカフェのサイトを作ろうとすると、筆記体のおしゃれなフォントを見出しにしたり、アンティーク調の木目を背景にしたりと、色々な素材が必要になってくるかと思います。
しかし、そういった素材を自分で撮影したり、練習のために購入したりすることは大変なので、無料の素材サイトを利用します。利用する時は規約をよく読んで使うようにしましょう。
写真素材
ぱくたそ
人物写真から風景写真まで幅広く揃う写真素材サイト。撮った写真は綺麗に加工してあるので使いやすいです。利用規約はこちらから
Unsplash
海外のサイトですがこちらも無料で商用にも使える写真素材サイトです。おしゃれですぐに使える写真が多いです。利用規約はこちらから
フリーフォント
見出しやロゴに使用されるフォントは、それだけでデザインの雰囲気をガラッと変えてしまいます。
FONT FREE
利用規約はフォントにより異なります。
4.他のサイトを真似してサイトを作る
本の通りにウェブサイトを1つ作る
本を見ながら、本の指示通りにコードを書き、ウェブサイトを作ってみます。デザインは簡単なもので構いません。コードを1つ1つ確認して、理解できなくても理解する努力をして、見本通りのウェブサイトを作ります。
私はこれのおかげでウェブを本格的に始めるきっかけになったし、丸写ししただけなのにウェブに関する理解が深まりました。
先に知識をつけて自分の好きなサイトを作るか、自分の好きなサイトを作りながら知識をつけるか、どちらもありだと思いますが、私は先に知識をつけたことで、自分の好きなサイトを作った時、デザイン・コーディングをスムーズに進めることができました。
HTML/CSS入門の参考書籍
当時私が参考にしていた本はDreamweaverを使って進めていくものだったので、本を読みながらウェブサイトを作れるタイプのわかりやすい本を探してみました。
5.0から自分のサイトを作る
HTMLとCSSに慣れてきたら、自分の作りたいサイトを作ってみます。就職活動で使うためのポートフォリオサイトでも、架空のカフェや会社のサイトでも構いません。最初に学んだデザインの基礎や原則を思い出しながら、デザインからコーディングまでを一通り行います。
デザインを考えるのは慣れるまで大変ですが、迷ったら他のサイトを参考にすると良いと思います。見出しや背景、ボタンやメニューなど、細かいパーツをよく見ると、こんな風に作るのかという発見にもなります。
それから最初から全部作ろうとは考えず、ポイントとなる小さなアイコン（矢印やホームアイコンなど）やテクスチャなどはフリーで配布されている素材から利用しても大丈夫です。
オススメのアイコン素材サイト
アイコン素材ダウンロードサイト「icooon-mono」
様々なアイコンをまとめてダウンロードできて便利です。
サイトの構成に迷ったら、一度紙にワイヤーフレームを書いてみると頭の中が整理されます。
ワイヤーフレームとはサイト設計図面のことで、「何を・どこに・どのように」が記載されたもののことを指します。制作するウェブサイトの要素や機能、情報をあらかじめ設計図面のように配置して、制作者とお客様の認識を合わせるためのものです。
まとめ：根気強く続けよう
私は今デザインを作ることは楽しいし、展示会などに行って新しい発見を探すことも嬉しく感じています。でも初めはコーディングが苦手で、できることならやりたくないと思っていました。
コードで行き詰まったり、ウェブサイトがおかしくなって変な表示になってしまったり、大変ではありましたが、やっていればできるようになっていました。コードも1度使っただけでは覚えられないので、何度も調べながら実践的に使っていくことで身についていくと思います。
調べればなんとかできるくらいの難易度だと思うので、諦めずに頑張ってみましょう。私も応援しています。
