skillup

技術ブログ

デザイン

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

投稿日:2016年6月22日 更新日:

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

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

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

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

基本は物まね

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ツールについて

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

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

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

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

-デザイン

執筆者:


comment

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

関連記事

no image

jquery multipleについて(応用編) keepOrder

さて、複数選択だけなら前回のエントリーだけでなんとかなりますが、左の項目の順番を入れ変えて保存したい場合、難易度がかなり上がります。 公式ページには下記のように書けばOKとかいてあります。 [cray …

no image

checkboxのカスタマイズ

ブラウザのディフォルトではなくcheckboxをカスタマイズしたいとき。 やったことなかったんですが、やってみると結構面白い。 Contents1 ソース2 参考リンク ソース まずはソースを。 ht …

no image

vertical-alignの挙動に関して

cssでの中央ぞろえを行う場合、横は案外簡単なんですが、縦の中央ぞろえは結構難しかったりします。 css中央ぞろえ ざっとまとめると以下のようなかんじでしょうか。 テキストのみの1行タイプであればli …

no image

lessサンプル

lessのサンプル Contents1 lessファイル構成2 ソース3 注意点4 参考リンク lessファイル構成 header,footer sytle 変数 lib 関数 common head …

no image

Bootstrapまとめ form+画像

前回に引き続きbootstrapネタについて。 Contents1 フォーム1.1 通常のinput1.2 項目名:入力欄の形式1.3 入力欄+ボタン(検索などでよくあるパターン)2 画像2.1 参考 …

アーカイブ