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

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

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

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

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

アカリノオト

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

アカリノオト

アカリノオト | 親子の時間を豊かに。 おうち時間を楽しむコンテンツを紹介しています。こどもちゃれんじの教材の写真も公開しています。

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

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

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

運営者

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

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

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

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

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

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

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

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

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

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

STEP

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

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

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

STEP

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

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

あわせて読みたい

ColorPick Eyedropper A zoomed eyedropper & color chooser tool that allows you to select color values from webpages and more.

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

STEP

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

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

STEP

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

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

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

お洒落なロゴ

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

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

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

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

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

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

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

LOGASTER

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

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

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

Canva PROで作る

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

SWELL公式ページ

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

アヤサンデザイン

【簡単】SWELLカスタマイズ｜サイト型トップページの作り方 | アヤサンデザイン この記事では、ブログテーマ「SWELL」でサイト型トップページを作る方法を紹介しています。 当ブログや姉妹サイト『アカリノオト』のトップページは、サイト型で表示されて…

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

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

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

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

どんぐり所長

ではまたっ！

推奨デザインツール

当サイトでは、無料でもオシャレなデザインが簡単に作成できる、「 Canva 」を推奨しています。無料でも相当なレベルのデザインができるのですが、一度PROにすると無料には戻れなくなってしまいました。その秘密は、下記の記事に。

あわせて読みたい

【CanvaPRO】有料プランでもっと快適・便利に【比較】 Canvaをお使いのあなた。写真やイラスト素材を選ぶときに、ほとんどが有料のマークが付いていてイライラ…こんな経験していませんか？ 有料のCanva Proにすれば、このイ…

Canvaを詳しく知る ➤

おすすめWordpressテーマ

私は、導入するだけで一気にお洒落になるWordpressテーマ「SWELL」をおすすめします。デザイン性はもちろん、その操作性は特筆ものです。

SWELLを愛用する私が実際に使用してきた内容を加えた、詳しい記事を書いています。ぜひご参照ください。

あわせて読みたい

SWELLを2年使った感想を本音レビュー【WordPressテーマ】 お洒落なブログを作りたい─あなたはそうお考えではないですか？お洒落にするにはデザインセンスが必須。確かにそういうところもあります。なら、デザインのセンスがなけ…

SWELLを詳しく知る ➤