【Webデザインに触れてみよう！ vol.3】

03:Webデザインに触れてみよう！

大変お待たせしました。ここからが本題です。
先ほどざっくりお話した「構成」「デザイン」「コーディング」の概要と
私が使いやすそうだなと思った・もしくは使っているツール等をご紹介します。
とりあえず無料〜有料までざっくりご紹介。

■構成編

構成はワイヤーや、サイトマップなどWebサイトやLPなどで必要となる
骨組み部分の要素です。
デザインから！っと入るのも勿論楽しいのですが、
後から色々と入れ替えたり、手を加えていくと
「最終的に何がしたかったんだっけ？」…となりがちです。

それを防ぐためにも、
・どの様なコミュニケーションをWebで行いたいのか
・Webの最終ゴールは何なのか
・コンセプト
・どこにどの様なパーツやコンテンツを配置するのか？
などを纏めて、方向性を見失わない様に準備しておくと良いです。

構成ツール

・手書き
→自分はよく手書きで落とすことが多いです。
　何をしたいのか、枠を書くのもペンと紙があればささっとできるのでかなり楽。コストも一番かからない気がしています。

・Mockup
→ちょっとプロっぽく見える構成ツール。パーツも豊富。
200パーツまでは無料で使えます。
ここのパーツを参考に、どの様な機能を持たせるか？を
考えてみてもいいかもしれません。

・PowerPoint（有料）
→ある程度手書きで落としたらパワポで作る、なんてことも。
　Officeを使用されている方はこちらが結構手軽なのではないでしょうか。

■デザイン編

デザインは、視覚的な設計を施すことです。
ここでは、先ほどの構成に肉付けしていくことをデザインと呼びます。

デザインは、目を惹く（かっこいい・おしゃれなど）のも勿論ですが
・ユーザーがどこどどこが同じグループなのか？を認識する
・ユーザーへの導線を説明書を読まなくても理解する
などなど、ユーザビリティにもかなり寄与する部分です。

見た目重視のみで作りがち…も良いのですが、
ユーザビリティの面で、
「ユーザーが操作しやすい、操作ミスをしにくいデザインを考える」
…という点を意識すると、
"プロっぽい"デザインが出来上がるかもしれません。

デザインツール

・GIMP
→私は使用していないのですが、よく名前が出てくるツール。
無料ツールで「Photo shopに引けを取らないツール」と呼ばれているみたいです。
多機能なので、初めて取りかかる方には
何から手をつけていいのか分からなくなるかも。

・Photo shop（有料）
→Adobeから出している有料ツールです。
元は写真の加工等がメインになるのですが、勿論WebサイトやLPにも使われています。
また、スライス等を行わなくても「アセット管理」で各パーツ毎に書き出せたりもできるのでおすすめです。
ゴッテゴテのバナーや煌びやかな装飾等もPhotoshopの方がサクッとできるイメージ。

・Illustrator（有料）
→こちらもAdobeから出している有料ツールです。
元々DTP用のツールとして使用されていましたが、WebのサイトをIllustratorで作る会社も多くなっています。
画像加工や、ゲームの様なゴテゴテの装飾をするには向いていないのですが、WebサイトやLPをチラシなどの印刷物に転用する予定があるのであれば
Illustratorの方がスムーズな場合もあります。

■コーディング編

コーディングは実際に肉付けされたデザインを
Web上で表示させる為に行うものです。
せっかくのWebサイトが１枚画像で貼り付けていては、
SEOとしても、ユーザビリティとしても好ましくありません。

正しいマークアップを行うことで、
Google検索など「検索エンジンのクローラー」に
サイトの内容を認識させて検索結果の上位に表示させたり
サイトを見てくれたユーザーを楽しませたり…などなど。

よりインターフェースとして、１つ１つ説明をしなくても
クリックやページ遷移が行える環境を整えてあげる役割となります。

コーディングツール

・Vscode
→プラグイン豊富で、とりあえず試しに触ってみようという方はおすすめ。
メモ帳の様な感覚でコードを記述できます。
また、タグの予測変換等もあるので入力もスムーズです。
※プレビュー等は付いていないので、画面を見ながら…という方には向かないかも。

・Sublime Text
→こちらもプラグイン等も豊富で、結構使っている人が多いイメージです。
検索したら結構説明サイト等が出てくるので、
扱いやすいツールの１つかと思います。

・Dream weaver（有料）
→Adobeのツールを使用されていて、なおかつ初心者の方は
こちらを使用してもいいかもしれません。
Dream weaverの特徴は何と言っても
コーディングが視覚的に見やすいモードがあること。
多少の重さはあるので、スペックが低いPCの場合は
あまりお勧めできないところ。

最後に

かなり長文になりましたが、
「Webデザインにふれる」というお題で３部作として
お送りしました。
最後まで読んでいただいた方はありがとうございます。

・こういうことが知りたい！
・デザインがプロっぽく見えるコツ
・コーディング嫌いを克服したい
…などなどお題を頂けたら
気の向く時にnoteに書いていきます。