skillup

技術ブログ

デザイン

一般的なWebサイト制作について

投稿日:

実務で通常のWebサイトを作成するというお仕事が。

Webサイトを改めて作成するっていう経験からはだいぶ遠のいてましたんで、これを機にスキルをまとめたいなーって思います。

サイト作成といっても本格的なものではなく、必要最低限のものになります。私はデザイナーではないので、本格的なアドバイスはできません。

そこらへんご勘弁を(汗) ただデザインセンスゼロであってもなんとか人に見せれるサイトが作りたい・・という方には参考になると思います。

基本は物まね

これが一番大事かな。デザイン系の学校に通っていたり、時間がある方はもっと体系的に学ぶ方法があるかもしれませんが、それ以外の方はそういった学習法は厳しいでしょう。とりあえず自分が作りたいサイトを3~4種類ぐらい引っ張ってきてそれを組み合わせることをすればよいと思います。

もちろん最初から納得いくものが一発で作れることはまれでしょう。

試行錯誤が必要になってきます。ただプログラミングと違って「動かず」にそこでストップということはないので、独学でもプログラミングに比べると挫折率は低いでしょう。

色は迷ったら白(あるいは白に近いもの)

サイトを作っていく過程で配色は結構悩むと思いますが、迷ったり、慣れないうちは白(あるいはそれに近い色)がお勧めだと思います。

変にカラフルにすると女子中学生のノートみたいに目がチカチカしたり、物凄くアンバランスなサイトが出来上がります。

意識していろいろなサイト見てますけど、やはり基本は白でアクセントにメニューバーだけ色を変えていたり・・というサイトが多いですね。

慣れてきたら後述するような配色ツールを使うのが良いでしょう。

フォントはディフォルトに近いもの

フォントのエッセンスも色と同じなのですが、あまり凝ったものは使わないほうがいいでしょう。

キャッチの写真の文字とかは別ですが、それ以外の通常のテキストは何も設定しないか、設定するとしてもメイリオや明朝などの「一般的なフォント」を使うようにしましょう。

あとは全体的にフォントサイズや行間などが狭いサイトが多いので、こちらは意識して少し大きめ、間隔は開けたほうがいいです。

コンテンツのグルーピング

本来はサイト作成の前にこれを考えなくてはいけません。

サイトを作っていくと大変なのはデザイン的なこともそうですが、同様に大変なのがページの配分だったり、コンテンツ自体の格納だったりします。

多くのサイトは大体4~5ぐらいのコンテンツがあると思いますので、使える文章、写真などを4~5グループぐらいにグルーピングしておきましょう。

余裕があれば理論の勉強を

一般的な方はここまでやる余裕はあまりないかもしれないですが、デザインの理論的なことを知っておけば普段何気なく作っているデザインにどういう意味があるのかを知ることができますので、応用が利くでしょう。

具体的には理論的なことが書いてある本などを読んでみるとよいと思います。

プログラミングの学習と近いと思いますが、これらは学習の初期にやってもチンプンカンプンですが、ある程度経験をつむと、経験をある程度体系的に整理することができます。

ツールについて

Web制作をするといっても0からhtmlを使うのか、テンプレートにあてはめるのか,CMSを使うのかなど手段は様々です。

さきほどの配色に関しても最適な配色を決めるツールなども数多くあります。これらを使いこなせれば作業効率が格段にアップします。

ただし、どの人にとっても万能なツールなどは存在しません。どの手段がいいのかも、作る目的や製作者のレベル、作成期間によって全く変わってきます。

たとえば全く知識がない方が趣味でサイト制作をするためには効率は悪いですが0からhtmlを組むことをお勧めします。逆にある程度サイト制作の経験がある方にとってはWordPressなどのCMSが良いでしょう。

 

 

-デザイン

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

no image

lessについて(CSSライブラリ)

Contents1 lessって?1.1 スコープが使える1.2 変数が使える1.3 関数化1.4 インポート2 インストール3 コンパイル lessって? CSSの保守性を向上させるライブラリ。これ …

no image

Angularモジュール間の読み込み

Angularで以前こちらで、複数のコントロールに分ける方法を書きましたが、コントローラーだけでなく、Factory,ServiceなどいろいろなタイプのサービスがAngularにはあります。 プログ …

no image

CSSのレイアウト例 その1 カラムレイアウト

本日はCSSのレイアウト例に関してよくあるものを見てみようと思います。 例によってサイトが具体的にどうなっているかを知りたい方は「プロとして恥ずかしくない 新・CSSデザインの大原則」を買いましょう。 …

no image

ブラウザ上でのドラッグ&ドロップの処理

あるシステムから別のシステムにデータを移すとき、一般的にはCSVを使うことが多いかと思います。 今携わっているシステムもそうなのですが、CSVのどの項目を選ぶかを変更したいときってありますよね。 以前 …

no image

cssでのmax,minや画像の配置に関して

主に画像なんかで使われるんですが、max(min)-width(height)などの使い方に関して。 えーmax(min)はどういうときに使われるかというとまず可変な要素に対して使われることが多いです …