HASIGOLOG

新生活、新しいことを始めたい人へ贈る「Webデザインのすゝめ」

はじめまして。HASIGOでデザイナーをしている岸垣です。
京都の大学に通わないといけないのに、渋谷のオフィスに日々出社しております。

桜の木々もすっかり新緑が美しい季節となり、
バタバタした新生活にも徐々に余裕がでてきた頃ではないでしょうか。
そうなってくるとこんな感情が芽生えてくる人は少なくないはず。

“Try something new!!”

おしゃれに英語使ってみましたが、あっておりますでしょうか。

“何か新しいことをやろう”

日本語でもかっこいい。

そんな感情に苛まれているけど「何」の部分を決めきれていない皆様!
朗報です。
今回は「webデザイン」との素敵な出会いをプロデュースさせて頂きます。

Webデザインとはなんぞやという方も多いかとは思いますが、

安心してください。
説明します。

もくじ

・ Webデザインとは

・ Webデザインをすゝめる理由

・ Webデザインと相性がいい人

・ Webサイト制作について

・ まとめ

Webデザインとは

website

ざっくり言っちゃうとwebサイトのデザインなどをすることです。

「など」をつけた理由については最後まで読んでいただければご理解頂けるかと思います。

ここでは、FacebookやYouTubeなどをはじめとする、Webサイトの見た目をつくる事と考えてください。
近年のWebサイトではデザインが重要視されていて使いやすいデザイン、かっこいいデザイン、可愛いデザインなど様々なデザインが存在しています。
それらのサイトは眺めているだけでも楽しくなるのですが、それを自分でデザインするのはもっと楽しいです。
この感覚伝わってますかね?ただの気持ち悪い人になってそうで怖いです。
例えるなら、ファッションに似てるかもしれないですね。好きな服選んだり作ったりとか、、、

ちょっと専門的な話をします。

Webデザインをする上で自分の好きなデザインのものを作ることに全く問題はありません。

ただ、せっかくWebデザインをするなら機能的な部分も考慮してデザインしていくとその楽しさ、奥深さが格段に増してきます。
というのもWebサイトの醍醐味として、見て終わりではなくて、実際にそれを使う人(ユーザー)がいるからです。

ユーザーにどんな感情を抱かせるか、どんな体験をさせるか。
そんな風に考え出すと実はWebデザインってとっても戦略的で知的なものになってきます。

最近ではスマートフォンのアプリデザインとかの領域もあってWebデザインと似た要素が多いのでそこにはほぼ垣根はありません。

いろいろ申しましたがとりあえずは「Webデザイン=画面の見た目の制作(奥が深い)」というような認識でお願いします。

参考にかっこいいサイトをまとめたサイトがあるので紹介しておきます。暇なときに眺めるだけでも楽しいので是非!

io3000.com

Webデザインをすゝめる理由

ズバリ、手に職が付きます。Webデザイナーという職種はがっつり専門職な上に技術職的な要素も持っていて実力さえつければ働き口はきっとそこらじゅうにあるでしょう。たぶん、、、

さらに、文系理系芸術系問わず独学でも飛び込める世界なので変な先入観や劣等感を持つ必要はありません。

理系でなくても技術は磨けばいいのです。
芸術系でなくてもセンスは磨けばいいのです。
実際にWebデザイナーとして活躍している人の中にも文系出身の人や全て独学でなんて人はたくさんいます。

さらに、現状日本の大学で最新のWebデザインを専門的学べるところはまだまだ少ないです。

いや、本当に真剣にやれば勝負できる世界です!!!

それと、後付けみたいになるのですが、最近ではスマートフォンのアプリのデザインをする場面・必要性もでてきていて活躍の場が広がっていってるのも魅力的ですね。

あとWebデザインはパソコンと電力さえあればできちゃうので初期投資以外基本的にはお金かからない点も最高です。

Webデザインと相性がいい人

person

→ ものづくりが好きな人
理由:Webデザインは絵を描くよりもプロダクト(製品)を作ることに近い。

→ Webが好きな人
理由:webの知識が不可欠でそこに対する好奇心があれば成長しやすい。

→ オタク気質な人
理由:僕がオタクなだけでした。すいません。

→ 論理的な人
理由:Webデザインは論理的に見た目を作っていくのでロジカルな思考回路は大いに役立つ。

→ カフェとかでカッコよくPCを使いたい人
理由:ガチで作業してますから的な雰囲気が作れるのでにわか感が抑制される。

上記に1つでも当てはまる方は迷わずPCを用意してください。
まったく当てはまらなかったとしても特に問題はないので気にしないでください。

Webサイト制作について

ではそろそろWebデザインの具体的なお話をしていきます。
やっとですよね。遅いですよね。

Webサイトのデザインをするなら実際に一つのWebサイトを制作できた方がモチベーション高まると思うのでここでは簡単にWebサイト制作のおおまかな流れについて説明したいと思います。
詳しいことはリンク先の記事を読んでいただくのがてっとり早いです。

それではさっそく、、、

1. サイトの企画

最初に当然ですがどんなWebサイトを作るかを決めてください。
ここでまず考えるといいのはサイトのターゲットと目的です。
これによってデザインの方向性を見出していきます。

たとえば同世代の乃木オタ達をターゲットにして、それらの人と握手会の感想を共有したいという目的が設定できます。

例えがわかりにくければ弊社までご連絡いただければ噛み砕いて説明いたします。

ターゲットと目的が決まればデザインコンセプトを決めちゃいましょう。
デザインコンセプトとかなんかかしこまった感じになってますがとりあえずはデザインを通してどんな感覚をユーザーに届けたいのかということを考えてください。

先の例で言うと、自分以外の人にもアイドルとの幸せなひと時を妄想してほしいみたいな感じでしょうか。
突き進みます。

ここまできたらサイトに載せる情報を整理してサイト構造を設計していきましょう。
この段階である程度どんな情報を載せるのかを決めてそれを分類しておくと後で無駄な時間を過ごさなくて済みます。

サイトの構造というのはたとえばブログとかだとトップページ、記事一覧ページ、記事ページ、プロフィールページがあってそれぞれがどのように繋がってるのかという話です。

だいたいメニューとかナビゲーションとかで繋がってますよね。
ここで大事なことはユーザーを迷子にさせない設計をすることです。

いやいやwebサイトで迷子にならないでしょと思った皆さん。
Webサイトの闇は深いですよ、、、

ということで、迷路みたいなサイトを作りたいとかいう特殊なコンセプトでなければ、サイトの構造は極力わかりやすいものにしてください。

sitemap

サイトの構造まで決まったらいよいよ次のステップです。
本当は制作ポリシーやらなんやらを決めた方がいいのですが今回はお試しなので割愛します。

2. ワイヤーフレーム作成

いよいよサイトのワイヤーフレームを作成していきます。
なんか聞きなれない言葉がでてきましたね。
ワイヤーフレーム。

でも安心してください。ただの設計図です。
かっこよく言ってるだけです。

ちなみにここでいうワイヤーフレームはサイトのレイアウトなどを組んだものを指しています。
先ほどのサイト構造の設計図もワイヤーフレームというので適当に区別していただけるとありがたいです。

wire

こんな風にコンテンツのレイアウトをざっくり決めたり、タブやスライドショーなど必要な機能を書き込んでいきましょう。

この段階では細かいデザインまで気にする必要はありません。
手書きでスケッチするもよし、Cacooやphotoshopなどのソフトを使用するもよしです。
自由です。

個人的にはCacooがおすすめで学生なら無料で使えるのでパラダイスです。

Cacoo

3. ビジュアルデザイン

design

ワイヤーフレームが完成したら次は、サイトのラフデザインを描いていきましょう!!
レイアウトと必要な機能は決まっているので、それらを色づけしたりデザイン要素を付け足したりしてWebページのデザイン案を作成していきます。

やっとデザイナーっぽい作業です。

この辺りから実際のサイズなんかも気にしたほうがいいかもしれません。
基本的にWebデザインではpx(ピクセル)という単位を使うのでそれに応じてサイト幅やコンテンツごとの幅を決めていきましょう。

まあ始めは適当で大丈夫です。

ラフデザインができたらがっつりWebサイトのデザインを固めていきましょう。
俗にいうモックアップだとかデザインカンプとかいわれるやつです。
ここで作ったやつがそのままWebサイトになるという覚悟のもと作成してください。(威嚇)

この工程では思う存分デザインを楽しんでください!

レイアウト・配色・タイポグラフィー・グラフィック・フォトグラフィ等々のデザイン要素の組み合わせは無限大で奥深すぎて飽きがきません。
その分学ばなければいけないことも多いですが。

知識をつけることはもちろんですが一番必要なのは実際に手を動かして作ることだと先輩デザイナーの皆さんに言われ続けてきたのでそういうことだと思います。
PhotoshopやIllustratorなどのツールを使いこなせるかも重要なポイントです。

専門的なことはここでは語り尽くせないので気になるワードがあればググってみてください。
おすすめ記事のリンクも貼っておきます。

配色パターンからwebデザインを考える

Webデザイナー(私)によるたいポグラフィーレイアウトの注意書き

Photoshopでwebサイトのデザインをしよう

これからPhotoshopでwebデザインをしたい初心者さんのためのツールパネルとかいろいろ

これからIllustratorを始めてみようという人のための基本操作とかいろいろ

Webデザインをする場合に多く使用されているソフトがPhotoshopです。
写真とか加工して肌とかがめちゃくちゃ綺麗になってしまうアレです。
正直プリクラより恐ろしい。

世間一般には高額認知されているのですが最近では月額980円で使えちゃいます。

またIllustratorというソフトもデザイン界隈でよく使われていて、こちらも月額980円で使えます。
どちらも1ヶ月間の無料体験ができるので始めはそれで試してみてWebデザインにハマったら購入を決意するのが一番かと思います。
月額で安く見せといてトータルで見たら結局まあまあな額さらわれますから、、、

最近ではそれらの代替ツールで高機能かつ無料なものもいくつか出てきているのでお金払いたくないという方はそちらの方も検討してみてください。

Adobe

Adobe製品の代わりに使える無料アプリ10+

4. コーディング

code

デザインができたらいよいよコーディングです!
いくらPhotoshopでデザインしてもそれだけでwebサイトは生まれません。
デザインしたものに命を吹き込んであげるのがコーディングです。

そもそもコーディングとは、HTMLとCSSをつかってデザインしたものをブラウザ(IE,chrome,safariなど)が表示できる形にしてあげることを言います。

基本的にWebページはブラウザがHTMLファイルを読むことで表示しています。
ただしHTMLだけでは文字だけの味気ないものになってしまうのでCSSでレイアウトや色などを調整・装飾してあげて様々なデザインを実現するという仕組みです。

CSSはスタイルを付加していくのでスタイルシートと言われます。
JavaScriptというプログラミング言語をつかって動きをつけたりもしますが、まずはHTML・CSSに慣れていきましょう。

なんかデザインじゃなくてプログラミングっぽいぞって思われた方もいるかと思います。
でもHTMLとCSSさえ覚えてしまえば世界中のディスプレイはあなたのカンバスと化します!

HTMLで文章を定義づけてWebページの骨格を作ったらそこにCSSでデザインカンプ通りの装飾を加えていきましょう。
HTML・CSSの詳しい使い方はここでは書ききれないので以下の記事を参考にしてみてください。

文章構造を意識しながらHTMLマークアップしよう!

ドットインストール CSS入門

CSSでWebサイトのレイアウト組み+装飾の基本プロセス

ドットインストール CSS入門

コーディングをする際にはテキストエディタというソフトが必要ですがこちらは元々パソコンに搭載されているものを使うのもいいですし、コーディングに特化したものを使えば効率よく作業ができるのでそれらを使うのがおすすめです。

下記記事を参照してみてください。

プログラミング初心者にオススメ!OS別テキストエディタ10選

5. まとめ

  1. サイトのターゲットと目的を決める
  2. 載せる情報を整理して構造を決める
  3. レイアウトを組んだワイヤーフレームを作る
  4. 色付けなどデザインをする
  5. コーディング

HTML・CSSでのコーディングが終わりデザインカンプ通りのものがブラウザで表示できるようになったら完成です!!

もしブログとか更新したいコンテンツがあるWebサイトであればWordPressぶち込んだりとかの工程があるにはあるんですがこれ以上は長すぎるので興味のある方は下記リンクを参照してください。

はじめてWordPressのオリジナルテーマを作るときの参考になればと思って書きました(サンプルダウンロード)

最後に

いかがでしたでしょうか。

本当に流れしか説明しなかったですがWebデザインの魅力は伝わったでしょうか?
趣味にも最適で手に職がついちゃうものってそうそうないのではないでしょうか?
この記事を読んだ皆さんがいつかWebデザインにメロメロになっている姿を想像して今日は眠ろうと思います。

せっかくの新生活。
何か新しいことを、、、という方には「webデザイン」超絶おすすめです!

RECRUIT

採用情報

私たちと一緒に

働いてみませんか?

to the next page

CONTACT

お問い合わせ

ご相談など

お気軽にご連絡ください

to the next page