デザインカンプを作ろう

こんばんは。なりです。

以前から作っているカフェサイトのデザインカンプについて書いていきたいと思います。

現在の進捗

訓練を卒業するまでの目標として

  1. ポートフォリオ作成    → Wordpress自作テーマで作る
  2. カフェサイト作成     → index.htmlのみ
  3. オリジナルHP作成    → すべてのページを作成する

この3つを挙げていました。

現状の進捗ですが、

今のところ…

少し遅れてはいますが、

なんとか順調です!!

カフェサイトは完成しました。

ポートフォリオはあと少しで完成です。

今は、主にオリジナルHPを作成しています。

オリジナルHPのデザインを考えています。

デザインもほとんど完成間近です。

カフェサイト

完成したカフェサイトですが、

まだまだブログには書けていません。

そこで、5回でカフェサイトのことをまとめていきたいと思います。

  1. デザインカンプ
  2. 写真集め
  3. コーディング
  4. コーディング
  5. 反省会

この5回に分けて記事を書いていきます。

今回はデザインカンプについて書いていきます。

デザインカンプを作ろう

今回はデザインカンプを作る上で必要だった

  • 配色
  • フォント

この2つについて書いていきます。

配色

デザインカンプを作るときに、

サイトの配色を考えました。

色についての知識をまとめていきます。

色の3属性

色を以下の属性で表すそうです。

  • 色相
  • 彩度
  • 明度

今までは全然知らなかったです。

調べたことを箇条書きに書いていきます。

色相

色合いの違いのこと。

赤や青の色合いの違いを環状にしたものが色相環

色相環の反対同士が補色

補色は視認性が高い

彩度

色の鮮やかさ

「0」は無彩色で色がない

色ごとに彩度の最大値が違う

最も彩度が高いものが純色

明度

色の明るさ

黒から白への変化が基準になっている

RGBとCMYK

色の表し方

RGBはパソコンやデジカメ、テレビで使用されている

CMYKは印刷物で使用されている

RGB

赤、緑、青の3色で表現する。

3色が最大になると白になる。

16進数で表現する方法と

各色は255までの数で表す方法がある。

CMYK

シアン、マゼンダ、イエローと黒で表現する。

主にRGBを使用しています。

カフェサイトの配色

今回のカフェサイトはフルーツが自慢のお店ということでした。

そのため、フルーツの写真をたくさん使うだろうということで、

ベースカラーはフルーツの色が映えるようにしたいと思います。

アクセントカラーはベースカラーの補色にしました。

フォント

フォントはサイトの印象に大きく関わってきます。

しかし、PCに入っているフォントはクライアント毎に異なるので、

WindowsPCではかわいいフォントを使っていても、

Macでは違ったフォントになってしまい、

サイトの印象が大きく変わることがあるようです。

フォントの種類

フォントは大きくわけて2つの書体に分かれます

  • 明朝体
  • ゴシック体

明朝体

線の太さに強弱がある

可読性が高い

高級感や大人っぽい印象

高級料亭や旅館は明朝体が使用されていることが多いように思います。

ゴシック体

線の太さに強弱がない

視認性が高い

見出しやインパクトを強めるときに使用すると良い

Webフォントを使う

全ての人が同じフォントを見るためには

自身のWebサーバにフォントのファイルを置く方法と

Webフォントを使う方法があります。

Google Fontsを使う

今回は無料で使える「Google Fonts」について書いてきます。

私のカフェサイトの見出しにも「Google Fonts」を使用しています。

しかし、「Google Fonts」には日本語は少ないのでご注意ください。

Google Fonts

たくさんのフォントが表示されます。

その中から好きなフォントを選び、

HTMLとCSSにソースを入れると指定したフォントを使用することができます。

詳しい使い方はこちらのサイトです。

【2018年版】Google Fontsの使い方:初心者向けに解説!

サルワカさんのサイトです。

その他の記事も大変参考になります。

デザインカンプ

私が作成したデザインカンプは、

次回の「写真集め」の最後に載せたいと思います。

では、今日はここまでです。

ありがとうございました。