こんにちは、Web未経験支援や独立支援をしているタカハシです。
webサイトをこれから作っていくんですが、そもそも最初にある程度、仕組みをわかってないとだめなので今回は仕組みと制作の流れについて学びましょう。
実際に作業してみないと分からない部分もあるので、記憶にとどめておく程度に見てください。
前回はコチラになります。
[card url=”http://web-tk.jeez.jp/wps/environment/”]
この記事の内容
webサイトってなにで出来てるんですか？
皆さんの見ている、このwebサイトはHTMLとCSSという言語で出来ています。（他にも使ってますが基本は）
試しに右クリックして「ソースを表示を」クリックすると出てくるのがソースコードになります。
実際に制作の詳しいことは、次回から進めていきます。
今のところは、webサイトは文字で出来てると思っておいてください。
なかにはデザインが出来たら完成してると思ってる人がいるみたいですが、けっこう手間なんですよね・・・。
上記のように複雑なので、こんな感じなんだ〜くらいに覚えておいてください。
webサイトが出来上がるまでの流れ
僕はフリーランスで活動しているので、基本的には1人で完結させることが多いですが、会社員のときは業務が細分化されていたので工程が細かく別れていました。
ヒヤリングや構成の部分は大事ですが、今回は単純に作業者としての内容になります。
まずはワイヤーフレームから作ろう
ワイヤーフレームとは？
ワイヤーフレームとは、webサイト設計の骨組みみたいなものです。
どこに何があって、なんのページがあって、どういう中身になるかを最初に視覚的に分かっておくためのラフデザインみたいなものです。
これがあると、指示を出す時の仕様や配置を直感的に伝えやすくなります。
主にディレクターの方が作ってるイメージがあります。
【ワイヤーフレーム参考】
http://www.wireframeshowcase.com/
紙に書いてもOK
これいつも僕がやってるんですが、紙に書くのが一番速いし沢山出せるんで良いですよ。
紙に書く場合は、いつでもどこでも作れるので良いのですが、ざっくりとした手書きなので、誰かに見せたりする場合は、下記のようなソフトなどを使って清書したほうがいいですよ。
慣れてるデザインツールで作る
- Illustrator
- Photoshop
- Power Point
このあたりはよく使うツールですね。
デザインツールの使えない方が作る場合、Power Pointで作る人が多いです。
パワポで作れんのって思うかもしれませんが、本当に簡単なレイアウトだけなので図形と文字だけ書ければ作れます。
デメリットとして、Macとの互換性がありますのでご注意ください。
webサービスを使う
もうちょっと簡単なのないのという方に、ワイヤーフレームなどを簡単に作って管理できるツールもあるので、ご紹介します。
Cacoo
Cacooメリット
- 直感的で簡単に作れる
- リアルタイイムで共有でき、同時編集が可能
Cacooデメリット
- インターネットにつながってないと使えない
Cacoo使用例
【Cacoo公式サイト】
https://cacoo.com/lang/ja/
デザインカンプを作ろう！
デザインカンプは、コーディングを行う前のデザインの完成形になります。
見た目上はwebサイトにUPするものと同じ見た目に作ります。
僕の場合1人で制作してると、あんまりカンプを作らずにいきなり作っちゃうこともあります。
デザインカンプを作るのに使用するデザインツール
Adobe CC
デザインするといえば、Adobeは必要になってきますよね。
- Illustrator
- Photoshop
イラレとフォトショで基本的にwebデザインカンプを作ります。
最近の傾向としてスマホの需要が高いため、Illustratorでデザインする方が増えています。
デザインツールの特徴に関しては、デザインの内容のときに説明します。
Sketch
僕はSketchを使ったことが無いのですが、周りの評判がかなりいいです。
Sketchの良いところとして
- Vectorでつくれる（拡大・縮小に強い）
- モバイルUIデザインに向いてる
- 操作が直感的でわかりやすい
- 軽くてはやい
- CSSのコードが自動生成できる
- 画像の書き出しが優秀すぎる
個人的にですが、上記の赤文字部分がいいなと思っています。
Adobeと比べて見ると、操作性・動きの速さが良いです。（少しだけ触った感じだと）
Adobeは高機能でなんでも出来るツールですが、webデザインに関してはなくてもいい機能がたくさんあるので、重たいのが気になりますね。
【Sketch公式サイト】
https://www.sketchapp.com/
デザインカンプを作る注意点
先にワイヤーフレームがあると思うので、こちらをベースにカンプを作成していきます。
ただ一つ注意しなければならないポイントがあります、ワイヤーフレームをそのままカンプにするのはNGです。
え？なんでって感じになると思いますが、ワイヤーフレームはあくまでも骨組みなのでそのまま作ってしまうと、なんか質素なデザインになってしまうんです。
僕も初心者のうちに先輩デザイナーさんやディレクターの方に突っ込まれました・・・
作り方についてはデザイン講座にまとめます。
webページにするためにマークアップする
ワイヤーフレーム→デザインカンプまで出来たらコーディングに入ります。
コーディングする際にテキストエディターが必要になるので、準備してください。
前回の記事にオススメのテキストエディターについて書いてあります。
[card url=”http://web-tk.jeez.jp/wps/environment/”]
コーディングは、デザインカンプをそのままブラウザ上で再現しなくてはいけません。
そのために前回も書きましたが、いろんなデバイスでの検証や数種類のブラウザに対応させて検証しなければなりません。
業界的にコーダーが一番人口が多いですが、ちゃんと設計ができてる人は以外に少ないです。
とりあえず見た目はちゃんと出来ていて、動いていたら中身がぐちゃぐちゃでも気にしない人もいます・・・
サーバーにアップして公開する
ワイヤーフレーム→デザインカンプ→コーディングまで終了したら、とりあえず公開できる準備は整いました。
webサイトはサーバーにアップしなければ、一般の人が見ることが出来ません。
仕組みは、この記事の一番最初にある図のような感じですね。
サーバーにアップロードすれば、あなたのwebサイトが世界に公開されたことになります。
以上が一通りの流れになります。
細かく言えばもっとあるんですが、作業者の大枠はこんな感じになります。
まとめ
どうでしょうか？なんとなくわかりましたか？
なるべく難しい話は無しにしてみました。
とりあえずは、まずは知らないことを知る事が大事です。
次回からドンドン実践的な内容になってきますので、おたのしみに！
