skillup

技術ブログ

デザイン

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

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

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

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

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

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

基本は物まね

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ツールについて

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

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

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

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

-デザイン

執筆者:


comment

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

関連記事

no image

スマホサイトの横ぐらつき ~border-size:border-boxigについて

スマホサイトをつくっていたところ、横幅がぐらつくというあり得ない事態に・・・ どうやら内部の幅が100%を超えるときにこの現象が起きてしまうようです。 Contents1 対策1 コンテンツの幅が10 …

no image

キャッチ画像の扱いについて

今さらながらですが、サイトのトップなどに貼り付けるメインビジュアル系の画像の処置について。 スマホサイトオンリーだとあまり考えなくてもいいかもしれませんが、PCやレスポンシブの場合、ブラウザの幅が伸縮 …

no image

css flexboxについて どんなことができるのか?

CSSを使い始めて数年がたっていますが、いまだに最適な書き方がようわかっとりません(汗) 特に難しいのが全体的なレイアウトの決定でfloatとかpositionなんかを使っていろいろと悪戦苦闘していま …

no image

css animationの使い方、他スクロース量でのアニメーションなど

transitionとちょっと近いですがCSSでのanimationに関して。 HTML

CSS [crayon-64746e3186 …

no image

BrowserSyncを使ったホットリロードに関して

BrowserSyncを使ったブラウザのホットリロードに関して。 ホットリロードとは「エディタなどで更新があった際にブラウザがすぐに検知して、最新の状態に自動更新してくれる」状態にブラウザをすることで …

アーカイブ