skillup

技術ブログ

デザイン

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

投稿日:

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

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

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

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

基本は物まね

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ツールについて

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

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

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

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

 

 

-デザイン

執筆者:


comment

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

関連記事

no image

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

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

no image

PDFテンプレートの活用

PDFのテンプレートの活用について。 PDFを出力するプログラムはいろいろありますが、今回はすでにあるPDFをテンプレート化できるライブラリについて。 Contents1 FPDI2 ソース3 参考リ …

no image

HTML5のinputタグのvalidatorについて

HTML5は標準でinputタグのバリデーション機能がついており、必須チェックや簡単なエラーチェックなどをすることが出来たりします。 必須入力のほかにも、telやemail、時間など様々なタイプのもの …

no image

boostrapでのヘッダーナビ作成

昔から私の作るWEBアプリはデザインがめちゃくちゃなことが多かったんですが、最近は多少デザインにも気を配るようになってきました。 実はCSSがあまり得意ではなくて、うまく組むためにかなり苦戦していまし …

no image

css小ネタ

実務でCSSをゴリゴリ書く機会があり、力不足を感じたので、メモを。 ライブラリlessやsassを使うとスコープを設定できるのでかなり楽 大まかな幅設定 スマホデザインの場合、幅を基本的に%で指定。p …