【美麗トップページ003】アカリノオト|女性らしい柔らかいトップページ

みなさんこんにちは!ブログデザインうまくいっていますか?

「最近、うまくいってないなぁ…」という人はデザインの良いサイトを真似することが上達への近道。

今回は女性らしい柔らかいトップページを持ったサイトをご紹介します。

ぜひ、参考にしていただいて、あなたのブログもお洒落にしてみませんか?

目次

アカリノオト

今回紹介するサイトはこのサイト。

アカリノオトは「おうち学習」、「推しアイテム」、「ブログ」の3本柱からなるブログ。

メインは子供向けの学習やアイテムを紹介しています。実際に使用してのレビューや写真も満載。こどもを育てる世代に役立つブログになっています。

ぜひ、実際のサイトを閲覧しながら記事を読んでくださいね。

運営者

あやまるさん

勉強熱心であり、自身が実際に経験して良い!と思ったものを発信されています。

twitterフォロワーが1000人を超えているのも納得ですね♪ あやまるさんのtwitterはこちら

アカリノオトがお洒落な理由 5選

ここからは、アカリノオトがお洒落な理由を5つ、説明していきます。

お洒落なサイトを作るにはまず真似から。どのようにして参考にしていくかも解説していきます。

統一感のある落ち着いたカラー

まず目に留まるのが、落ち着いた色。少しくすんだ色相でサイト全体が統一されています。

とても落ち着いていて、やわらかく女性的な印象をもつ配色です。

彩度差が大きくなればなるほど違和感が生まれてきますので、彩度を合わせる事は非常に重要です。

ここでは、気に入った色あいのサイトから色を取得する方法を解説していきます。

STEP
あなた好みの色あいのサイトを見つける

本当に色は個人の好き嫌いがでるところです。あなたが好きなサイトを見つけるところから始めましょう。

ここでは「アカリノオト 」を参照します。

STEP
ブラウザ「Googlechrome」の拡張機能「ColorPick Eyedropper」をダウンロード

下記のリンクより ColorPick Eyedropper をダウンロードし拡張機能をオンにします。

拡張機能をピン止めしてブラウザに常時表示しておきましょう。

STEP
色を取りたいサイトで右上の ColorPick Eyedropper のアイコンをクリック

小さなウィンドウが開きます。アイコンをあわせた箇所の色番号を表示してくれます。

STEP
表示された色番号を記録し、あなたのサイトで適用

#8ABBC0が「アカリノオト」の青色部分の色とわかりましたね。

この色をあなたのサイトのデザインカラーに入れると、アカリノオトと同じ色が使用できます。

チェックポイント

色を取得するには「ColorPick Eyedropper」がおすすめ。

お洒落なロゴ

アカリノオトのロゴ

お洒落なサイトや権威性の必要なサイトでは、ロゴが必須ともいえます。

あやまるさんは可愛いリスの画像と独特の味わいのフォントを利用して雰囲気をだしています。

あなたもCanvaなどの画像サイトやソフトを作る事ができます。しかし、注意点があります。

ロゴはなるべく透過素材で作るようにしましょう!

背景などの色に合わせて作ってもよいのですが、サイトのカラーなどを変更する度にロゴも作り直す必要がでてきます。

pngの透過素材でロゴを作成しておくことで、どの様な場所でもすぐ使用できるようになります。

簡単に透過ロゴを作る方法を二つご紹介します。

LOGASTER

LOGASTERは無料で簡単にロゴが作成できる外国のサイトです。

小さな画像なら無料で作成する事ができます。逆に言えば大きい画像は有料になりますのでご注意ください。

ロゴ用の画像やフォントも豊富に用意してあり、調整なども簡単に行えます。

私の別サイトにて詳しい記事がありますので、そちらもご参照ください。

Canva PROで作る

Canvaの有料機能である、Canva Proを使用する事で、簡単に透過画像のロゴを作る事ができます。

無料版では透過画像でdownloadができませんので、私はCanva Proをおすすめします。

  1. 他の無料サイトやCanva内で気に入った画像を探します
  2. 気に入った画像を「背景リムーバ」機能で切りぬき
  3. テキストを配置
  4. ダウンロードの際、形式を「 .png 」にし、「透過画像」にチェックを入れてダウンロード

これだけで簡単に作る事ができます。

背景リムーバの詳しい記事は下記をご参照ください。

お家デザインのメインビジュアル

アカリノオトではお家をモチーフとしたメインビジュアルを使用しています。可愛いお家が並んでいる様子はとてもポップでデザインチック。

こちらのポイントはサイト背景とメインビジュアルの背景を全く同じ色とする事で、メインビジュアルありながらまるでサイトの余白の様に使用している所です。

写真などを一面に配置すると圧迫感が出がちですが、背景の色を合わせる事で、サイトが広くなったような印象になります。

こちらも一つの案として持っておくと、サイトデザインの幅が広がります。

チェックポイント

メインビジュアルは必ずしも写真やタイトルバナーを入れなくてもよい。

自由線のピックアップバナー

アカリノオトのピックアップバナー

ピックアップバナーとは、メインビジュアルやサイトタイトルの下にくるおすすめの記事などを表示するバナーです。

ほとんどの方は四角い形のまま配置されていますよね。しかしあやまるさんは、こちらにも手を加えています。

自由線のまるっぽい形のバナーを使用する事でやわらかい印象を演出しています。もちろん色もサイトと同じように彩度を合わせています。

こちらも簡単に真似する事ができますので是非挑戦してみましょう。

Canva の無料素材にも自由線の丸があります。色も変更できますのでこちらを利用しましょう。

Canvaの無料素材

完全にオリジナルの自由線の丸が作りたい場合はイラストレーターが良いでしょう。

年に何回かアマゾンでお安く契約できる時期がありますので、挑戦してみるのもいいですね。

SWELLの曲線フルワイドブロック

SWELLのフルワイドブロックを活用

アカリノオトではたくさんの波型の曲線が使用されています。

これは今大人気のWordPressテーマ「 SWELL 」の標準機能「フルワイドブロック」で作られています。

デザインやCSSが苦手な人でも簡単にパラメーターを調整するだけでお洒落な波線を作る事が出来ます。

固定ページでブロックを当てはめていって、オシャレなサイトが出来てしまうのがSWELLの良いところです。

手軽にお洒落なサイトを手に入れたい人は是非SWELLをご検討ください。

SWELL公式ページ

あやまるさん自身が SWELLでトップページをサイト型に変更する記事を書いておられます。是非こちらもご参照ください。

【まとめ】アカリノオトがお洒落な理由!

アカリノオトには、オシャレなサイトを作るヒントが満載でしたね!ではここで、そのポイントをおさらいしていきましょう。

アカリノオトがお洒落な理由

配色の選定とサイト全体での彩度統一
❷ オリジナルロゴを作成
❸ メインビジュアルを背景と同色にしてサイトを広く使う
❹ 自由線のピックアップバナー
❺ SWELLを使用

アカリノオト 」にはお洒落なサイトのヒントが満載!トップページだけでなく、記事も必見です。

ぜひあなたも「 アカリノオト 」を参考にしてお洒落なサイトを作ってくださいね!

どんぐり
どんぐり

ではまたっ!

目次
閉じる