Webデザイン のすゝめ

2015 First LT Tubasa Sekiguchi (Also known as KNH)

Who?

関口　翼 SEKIGUCHI TUBASA

WEB開発学科

twitter.com/knh0015 facebook.com/knhlike

Creating:

Created:

ようこそ群馬へ （課題０９）

個人サイト

夏休みを楽しもう （夏休み前 グラフィックスデザイン）

ウェブデザイン、好きですか？ 私はとても好きです。

今回のLTは、ウェブデザイナー志望の私にとって、 「こだわり」なようなものを 紹介していきたいと思います。

ウェブデザイン（英: Web design）は、デザインの一種。ウェブページやウェブサイトにおける視覚面（意匠・要素配置等）に対し、整理・再構築・意匠等を施すことである。グラフィックデザイン的な要素を多く含む一方で、インタラクティブな要素を持つWWW（ウェブ）の性格上、情報デザインあるいは工業デザイン的なスキルも求められる。ウェブデザインを行うデザイナーを、ウェブデザイナーと呼ぶ。2007年より、ウェブの設計技能を検定する国家資格と

してウェブデザイン技能士がある。

http://ja.wikipedia.org/wiki/ウェブデザイン

1. 骨格へのこだわり

私には、Webデザインへのこだわりがあります。 主に３つ挙げるとすれば、

１．見やすいコード ２．ミニマルなコード ３．クラスを多用しない

HTML Example:

imgタグにはaltは必ず付けましょう。 divは必要最低限。

コメントも、わかりやすさを考慮。 XHTML必須案件のため、空タグ閉じもしっかりと。

2. スタイルへのこだわり

デザインは、「見た目が良ければいい」 というわけでは、決してありません。 こちらも、私のこだわりを３つ挙げます。

１．メンテナンス性のあるスタイルシート ２．HTML5、CSS3で済ませられるなら、積極的に使う

３．便利なツールを使用する

CSS Example:

CSSリセット、重要です。 コメントもちゃんと付けましょう。

必要のないプロパティは、予期せぬ表示、メンテナンス性の低下を引き起こします。

3. 使用ツールへのこだわり使い慣れたつかいやすいツールを使うことで、 最大限の制作パフォーマンスを得られます。

基本的にMac前提です。

Mockup Graphics Coding

モックアップ（ラフ画）作成は、

ズバリ、紙です。 簡単な構成、デザインは紙で書いてしまいましょう。

自分の作成した紙モックアップは、残念ですが汚すぎて見世物にはなりません。

ただ、自分なりに書いて、自分で読んでデザインを作れれば、 それで問題無いと私は考えます。

3-1. モックアップ

3-2. グラフィック

グラフィク作成は、

Illustrator が、おすすめです。

高価なソフトウェア*1でもありますが、デザイナーを目指す方なら、 それほど高い月額費ではないと思います。

*1: コンプリートプラン 4,980円/月

3-3. コーディング

コーディングは、

Brackets がベストです。

優れたインターフェイス、ソースコード色分け、その他いいことづくめです。

Adobe Dreamweaverも持っていますが、断然こちらのほうを使います。

ご清聴ありがとうございました！今回のLTは、自分なりのコードの書き方、使用しているツールなどを紹介しました。

時間の制約から、説明できない点もあることをお詫びします。 次回もまた、よろしくお願いします！