loader image

ブログ成長日記

開業用ホームページにリニューアル①~サイトカラー編~

2023-11-21

人に雇われるのがイヤで、独立しようと考えたときに、開業権のあり鍼灸師を目指しています。

昔から考えが単純でした。

無いなら手に入れようと。。

最近になって、今ある資格でも十分に開業する能力があるのだと気づきました。

資格を取れる頭くらいはありますが、生き方がヘタ過ぎるのです。

以前から、自費看護サービスという存在は知っていましたが、自分が個人事業主として自費看護をやっていこうとは思いませんでした。

自費看護サービスを提供する企業に登録して、仕事をもらう感じだと思っていました。

派遣じゃん!って。

しかし色々調べていくと、個人事業主として自費看護サービスを提供している人の存在を知りました。

そんな、こんなで、鍼灸師の仕事ができるには、まだ1年以上先の話なので、自費看護サービスをお試しで始めてみようかと考えました。

年20万以上稼がなければ、雑所得で開業届けを出す必要はないので。。

本格開業をするための、準備としてどれくらいの需要があるのかの調査を兼ねて。。

いつまでもブログ風サイトではお客様は来ないので、企業風サイトにリニューアルしていこうと思います。

ホームページ作り第1弾として、サイトのイメージを左右する、サイトカラーから決めていきたいと思います。

サイトカラーを決める

このサイトカラーをリニューアルしていきます。

同じカラーを使っていても、配色の割合が違うと印象も変わってきます。

好きな色を組み合わせるだけでは、なんかヤボったくなります。

Kagayaはあまり配色のセンスがないので、↓の本を参考に色を決めていこうと思います。

イメージとしては屋号を「きらぼし」にしたいので、青や紫などの寒色系がいいかなと思います。

今回は「星空のプリンセス」というテーマで星空をイメージした配色で紹介されている↑この3色を使っていこうと思います。

AFFINGER6公式マニュアルより

そして、アフィンガーのサイト構成にはレイヤーのようにいくつかのパーツが重なってできています。

各パーツごとに配色を決めていきます。

Bodyの配色

body部分は一番下の大きな部分のパーツです。

管理画面から「外観」>「カスタマイズ」>「基本エリア設定」>「背景色で設定することができます。

背景スタイルでは水玉やボーダーを選択することもできます。

水玉模様がかわいいので、水玉を選択しました。

3色の組み合わせは6通りできます。

ベースの色を変えるだけでも印象が違います。

どれも、かわいいです。

アクセントも色を変えると、少し印象が違います。

Headerエリアの配色

headerエリアはbody部分の上のレイヤーになります。

管理画面から「外観」>「カスタマイズ」>「基本エリア設定」>「headerエリア」で設定することができます。

ここを設定するとこんな感じで、単色だけでなく画像も使用できます。

※ヘッダーエリア(カタカナ)とは違います。

Header以下エリアの配色

管理画面から「外観」>「カスタマイズ」>「基本エリア設定」>「header以下のエリア」で設定することができます。

ここを設定すると、せっかくの水玉模様が消えてしまいます。

header部分の背景で作成した画像を使用すると、それはそれでかわいいかなと思います。

ヘッダーエリアの配色

ヘッダーエリアはheaderエリアの上の部分になります。

ここを設定するとheaderエリアの部分が上書きされてしまい、消えてしまいます。

管理画面から「外観」>「カスタマイズ」>「基本エリア設定」>「ヘッダーエリア」で設定することができます。

ヘッダーエリアも単色だけでなく、グラデーションや画像を使用することができます。

ヘッダーカードエリアの配色

管理画面から「外観」>「カスタマイズ」>「基本エリア設定」>「ヘッダーカードエリア」で設定することができます。

ヘッダーカードの背景の配色を変えることができます。

Mainエリア(フロント)の配色

管理画面から「外観」>「カスタマイズ」>「基本エリア設定」>「mainエリア(フロント)」で設定することができます。

こんな感じに、フロント記事の背景を変えることができます。

Mainエリア(記事)の配色

管理画面から「外観」>「カスタマイズ」>「基本エリア設定」>「mainエリア(記事)」で設定することができます。

Mainエリア(フロント)と同じ、設定にしてみました。

フッターエリアの配色

管理画面から「外観」>「カスタマイズ」>「基本エリア設定」>「フッターエリア」で設定することができます。

何も設定をしないとbody部分の模様になっています。

グラデーションにしたり、画像を使用したりすることができます。

まとめ

配色について色々と細かい所まで設定することができます。

最終的にこんな感じにサイトカラーをリニューアルしてみました。

色が変わるとサイトのイメージも変わります。

上のレイヤーによって下の部分のレイヤーが見えなくなってしまうかも知れませんが、下の部分を残したいのであれば、上の部分の設定をしなければ良いです。

なので、サイトカラーを決めるときは、一番下のBody部分から決めていくといいと思います。

-ブログ成長日記