MENU CLOSE

ホームページの出来るまで 分かりやすく説明! ③プログラム編
2018/05/28

みなさん、こんにちは。 Mon Webの楠本です。

今回はホームページの作り方の解説第3弾プログラム編です。
自分がホームページをプログラムして行く上でどんな風にしているかをざっくりではありますが書いていこうと思います。 こんな事しているんだ!と思っていただければ幸いです。

デザインからのパーツ作り

まずは、デザインのデータからページを作る上でのパーツを作っていきます。
主にロゴマーク・表示に使うアイコン・挿入する表やグラフなど様々ですが、基本的にはcssの設定だけでは表現しにくいものを目安に自分はパーツをデザインデータから作成しています。

現在ではできるだけテキストで構文を書き、cssで装飾すると言うことが推奨とされているので、それに準じて作業をしていきますがやはり表現の限界はあります。
例をあげると手書き風のロゴマークとかの場合、WEBで使用するフォントでは表現することは難しいです。その場合は画像として書き出し、拡大・縮小を使いデザインとのバランスを取るような構文を作成していきます。

上記のような自分の中である線引きの中でどれを画像にして書き出すかを決め、パーツ作りをしています。(事前に指示がある場合や、画像の書き出しデータの作成がある場合はそれに準じています。)
イメージとしてはジグソーパズルのピースを作っていると思っていただくと分かりやすいかもしれません。

枠組み・骨組みを作成する

パーツが完成したら、テキストのみで骨組みを作っていきます。
作り方は人それぞれですが、自分の場合はまずは大まかな枠組みをします。

枠組みの例の画像


上記はデザイン一例ですが、このような枠組みの構文を書いていきます。
先ほどのジグソーパズルの例で言うと、まずは外枠のピースを組み上げていくと言う感じになるでしょうか。

その後に、それぞれの枠組みの中に内容の骨組みとなる構文を書いていきます。
デザインに書かれている見出しや文章を記述していきます。 この時にはデザインで書かれている文字を間違いなく書き込む事が重要になってきます。
コピペで内容をトレースしていく事が多いのですが、その時に選択範囲のミスなどがあるかもしれないので、こまめにチェックをしながら作業をしています。

cssによって見た目を装飾

上記の骨組みが出来たら、cssと言う構文を使って見た目の装飾をしていきます。

cssでは使っている文字の種類・太さ・大きさを設定したり、要素との隙間の設定や配列を設定したりする事ができます。
これをデザインの見た目になるように構文を書き込んでいきます。ここでの設定がかなり重要な割合を占めているので、可能な限り構文をわかりやすく・短くを目指して制作していきます。
わかりやすく・短くを念頭に置いて制作して行くと、後に部分修正などの効率が上がるので共通部分を多く作るようなイメージで制作しています。

現在台頭しているレスポンシブサイトの見た目もここの部分で作られています。
主に横幅がどの大きさになった時にどのような見た目にするかの構文を書いて反映させています。
この条件分岐のポイントが多いとかなり時間がかかってしまう事があるので、事前のヒアリング・デザインの時の話し合いがかなり重要になります。

サイト内の動きの部分を制作

上記まで完成したら、次はサイト内での動きの部分を制作していきます。
よくサイトでも見かけるTOPへ戻るボタンやスクロールしたら画像が出て来ると言うのはjavascript(jsと省略させて呼ばせていただきます)で作られています。

こちらのプログラムを使って、サイトに動きをつけていきます。
動きのあるページは閲覧者の視覚的効果をかなりあげる事ができます。 しかし、あまり多く入れすぎてしまうとサイトの読み込みが遅くなってしまったり、逆に見にくくなったりするので気をつけていかなけばいけません。

最終確認をして公開準備

いよいよ仮サイトでの最終確認になります。
サイトは様々な状況で閲覧されるので、その状況下でもエラーがないか?の確認になります。 こちらでどこかの条件であった場合は修正を行い公開できるようにしていきます。
意外なところで不具合が出たりがあるので、気を抜けないですが全ての事が完成した時の達成感は何事にも代えがたいものです。



みなさん、いかがでしたでしょうか?
ざっくりとした工程の説明でしたが、どのような事をしているかの理解に繋がっていただければ幸いです。


それでは、また!