skillup

技術ブログ

デザイン

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

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

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

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

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

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

基本は物まね

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ツールについて

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

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

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

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

-デザイン

執筆者:


comment

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

関連記事

no image

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

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

no image

チェック状態のradio,checkでの要素の表示、非表示

CSS小ネタ系。 チェックボックスやラジオと隣接するテキストボックスがあって、チェックがあった時のみ表示したい。(例えばその他の自由入力欄) 完全に隣接の場合にはCSSの+が使えるんですが、そうもいか …

no image

共通CSSに必要な要素

簡単な業務アプリだとBootstrapなどのCSSフレームワークを使うことが多かったのですが、不必要な機能があることもあり、自作で非常に手軽なCSSを集めてこれを共通のCSSとして使うことが多いです。 …

no image

CSSのレイアウト例 その3 固定+リキッドレイアウト

本日は固定レイアウト+リキッドレイアウトについて。 リキッドレイアウトとはブラウザの幅に合わせて表示を変える方法でして、スマホが一般的となった現在では非常によく使われています。 今回解説するのは例えば …

no image

CSS floatについて

以前もちょっと書きましたが、CSSのfloatについて。 http://skill-up-engineering.com/?p=1708への追記 親から見るとfloatした子供は存在しない状態 flo …

アーカイブ