誰かに見てもらうための、簡単なデザイン

ホームページってどうやって作っていくの?という初心者向けの説明

先日、兵庫県宍粟市で行われた「楽しそうネットワーク」という情報通信技術の活用勉強会にて、ホームページはどうやって作っているのか、制作に必要なHTMLとCSSとは何か、ということをお話してきました。
本当に初心者向けの、全くホームページ制作などしたことないという方に向けた、初歩の説明です。

44_signalessdesign-web

私は独学で1年以上Webサイト制作について勉強していますが、全くいい加減なところもあり…教える立場にはまだまだなれないわけで…スライド作ったもののこれでいいのか(;´Д`) とか思う部分もありましたが、Web制作の現場で活躍されている方々からの助言も頂けて、大変勉強になりました。

スライドで、モデルとして使ったのは、制作中の私のホームページです。
そんなスライドですが、公開してみました。

今回お話して、ホームページ制作というのは、専門の言語やソフトを使う分、そういうものに全く触れたことがない人にとっては難しく感じると思いますし、それをわかりやすく説明する…というのも難しいと思いました。
が、私もそうなのですが、HTMLとCSSは最初はコピペでも、英語が元になっている言語なので、使っていくうちに意味が理解できると思います。
そして、間違った使い方とかしちゃうと思うんですけど、本当はダメなんですけど、気づいたら恥ずかしくなるんですけど、でも自分が思ったとおりに表示されると嬉しいわけで…とりあえず怖がらずに書いてみるのが良いと思います。
きっとやっていくうちに何がおかしいかとか分かってくるのではないかと思いますし、やっぱり経験が大事だなぁと思いました…。

テキストエディタ「Brackets」について

無料のテキストエディタ「Brackets」は、HTMLやCSSなどの予測、補完機能があって、見た目も綺麗だし初心者さんでも使いやすいと思います。
詳しくは以前記事にしました

ラフ画について

スライド中の私のラフ画はめっちゃ汚くていい加減で申し訳ないのですが…ラフ画を描くことも大事です。
ぐっと作りやすくなります。
あと個人的には「テーマ」を決めると作りやすくなります。
私の場合、テーマが単語だったり文章だったり、ひどい時は音楽だったりします。そんなところからデザインのアイディアを出しています。
今回モデルにしたホームページのデザインテーマは「雪の日の線路」なのですが、私はこの単語から色々想像してデザインしていっています。これは妄想するのが好きな人じゃないとやりにくい方法かもしれませんが…(;´Д`)
ちょうどこのデザインをしていた日は大雪でした。そんな思い出もあります。

ラフ画書いたり設計したり…という作業を「ワイヤーフレーム制作」と言ったりします。
詳しくはこちらで解説されています。
Webサイト設計図 – ワイヤーフレームの作り方 | Webクリエイターボックス

ノーマライズCSSとリセットCSS

勉強会で補足があった部分です。
今回のモデルのホームページでは、ノーマライズCSSを採用しています。
ホームページを見るとき、どのブラウザ(ホームページを見るツール。インターネットエクスプローラーとかサファリとかグーグルクロームとか)で見るかによって、表示がちょっと変わってきます。
これは、ブラウザが最初から用意しているCSSが、ブラウザ毎で異なるためです。
CSSはデザイン担当の文書です。これを読み込むことでホームページのデザインが決まりますが、ホームページを見やすくするために、ブラウザ側でもあらかじめ設定されているCSSがあるそうです。
<h1>とか<h2>とかいう、見出しを指定するhtmlタグなどは、それらを文字に指定するだけで最初から文字が大きくなったりしますが、その最初の設定がブラウザによって差があったりします。
最初から差があることによって、自分の書いたCSSが、ブラウザを変えると違って表示される…ということをなくすために、ノーマライズCSSやリセットCSSは使われます。

リセットCSSは全ての設定をリセットするので、自分でCSSを書くときは、細かくしっかり指定をしていく必要があるそうです。

ノーマライズCSSは、全てをリセットするわけではなく、各ブラウザでのCSSの差を無くしてくれるCSSです。
なので、ブラウザ標準のCSSは、差はなくなれど効いたままになっています。
これがあることで、細かい指定がなくても、ブラウザ側でCSSの調整が入るので、自動的に余白などが入ることがあります。

どちらを使うのがいのか…というのは好みによるらしいのですが、最近ではノーマライズCSSを使うのが主流になってきているそうです。最初からある程度形の整ったCSSがあって、それをベースにするほうが作っていく上で安全だったり、修正しやすかったり、スマホ用のブラウザも補正してくれる点が良かったりするようです。
しかし、1からがっちりデザインを指定したい場合は、リセットCSSの方が使いやすいかもしれません。

もっと詳しい説明はこちらにあります。
Normalize.cssを使ったコーディングの注意点とリセットCSSとの違い | Cappee Design

idとclass

これは何が違うのか、というのは私も昔よく理解していませんでしたし、勉強会でも出た話です。
idは、そのページに1度しかない要素に使います。一度しか出てこないということは、そのidが使われているところは一箇所なので、文書中の場所を特定したり、また違う人が編集したりする時に「これは1つしかない要素だ」という風に伝えることができます。
1つしかない要素という認識は結構重要で、1つしかないと分かっていれば、修正箇所の確認なども楽ですし、またその要素の個性や重要さも教えてくれるんじゃないかなぁ…と思ったりします。
classは何回でも使えるので、1つではなく何回でも適用したいデザインなどを指定する時に使います。
classの方が汎用性が高いですし、idを使うべきところでclassを使っても表示に問題はありませんが、分かりやすいHTMLを書くためには、idとclassは使い分けたいところです。
私も最初は使い分けが不安でしたが、実際HTMLを書いて修正を繰り返していくと、idやclassの使い分けについて何となく分かってきた気がします。使い分けると修正作業とか楽です。

そんな感じですかね…。
今回スライドを発表するにあたり、色々ツッコミを入れて下さった皆様ありがとうございました。
とても勉強になりましたし、ほんとの初歩ですが、基本を見直すことは大事だと思いました。
これからホームページを作ろうと思ってらっしゃる方の参考になれば幸いです…なるかな…。

それでは!Have a nice design!!