ひさしぶりの投稿となりました、「美麗トップページ」。
更新忘れてるんじゃ？と思われた方も多いのではないでしょうか。
特に大した理由もなく、ただひたすらに忙しかっただけです（言い訳）
以前の紹介記事はコチラ
しかし、今回紹介するブログはそんな忙しい中でも紹介したい、とても洗練されたサイトです。
では、なぜそんなお洒落なサイトになっているのでしょうか？
理由を考えて行くことで、あなたのサイトのヒントにしてくださいね。
目次
RUKI BOOKS
今回紹介するサイトはこのサイト
RUKI BOOKS
RUKI BOOKS | あなたと本をつなぐブックキュレーションブログ
あなたと本をつなぐブックキュレーションブログ。書評も要約もしないゆる～いブックレビューをネタバレなしで書いています。目指すは、読書を楽しむ方に向けたブックエンタ… 簡単に言えば「書評ブログ」。でも絶対に内容をネタバレしない、その本を総合的に評価するサイトであえて運営者は「書評」という言葉を使用しません。
今回は紹介しませんが、記事の書き方もお洒落。その本がどういう本なのか、評価や図解で説明してくれます。とても読みやすく、わかりやすいので参考になります。
また、「レコメンド３」と銘打って、そのジャンルの本を３冊紹介。同じジャンルでも方向性や解釈が違うことがありますよね。その３冊を読んでおけばとりあえずそのジャンルの方向性を網羅できるという取り組みもされています。
運営者
るきRUKI BOOKS 管理人
年間120冊程度の本を読む
好きなもの：本屋、図書館、カフェ、コーヒー、夏、朝
趣味：投資、アクアリウム
座右の銘：ユーモア、誠実さ
プロフィールより
るきさんは年間120冊も本を読む読書家です。そんなるきさんが評価してくれるのだから、おもしろくないわけがないですよね！
るきさんは私が運営するデザインコミュニティ、「ブログデザイン部」にも所属してくれています。
もともとセンスをお持ちだったのですが、最近はデザインにも非常に興味を持たれて、デザイン本を読まれたりと勉強をすすめ、めきめきとデザイン力をつけてきている期待の新星です。
そんなるきさんが、楽しみながら作ったサイトを紹介していきます。
RUKI BOOKSがお洒落な理由 ６選
まずはサイトを確認していただきたい！
実際に伺って頂きたいのですが、動画もご用意しましたのでご参照ください。
RUKIBOOKSのトップページサイトはこちらからどうぞ。
目を引くメインビジュアル
メインビジュアルサイトを開いてまず目を引くのが、大切そうに本を抱きかかえる女性と「本が好き。」というキーワード。
これだけで、RUKI BOOKSがどういうサイトなのか一目瞭然。
さらに、女性だけが左から右へスライドしてくるアニメーションを使用することで、思わず手を止めてしまうような仕組みになっています。
チェックポイント
サイトの内容に合わせた写真とテキストでどういうサイトなのか表現
アニメーションを使用することで目を止めさせる
アニメーション
次に目を引くのがアニメーション。
見出しやイラスト、記事などが上からどんどん降ってきます。
アニメーションは思わず見てしまう特性があるため、滞在時間を伸ばす効果があります。
読者に見てもらいたい部分にアニメーションを入れることで、手を止めてもらえます。
るきさんは存分にアニメーションを使って表現されていますね。
透過素材を使用する
るきさんはアニメーションしてくるイラストや見出しなどをすべて透過素材で行っています。
- 透過素材とはイラストや文字の背景が透明になっている素材の事。
基本的に.png形式の画像になる。
透過素材にすることで、背景の色違いの場所でも違和感なく美しくアニメーションしてくることができます。
また、デザイン変更で背景色などが変わっても、そのまま使用できる場面が増えてくるのでとてもおすすめの手法です。
透過素材は「Canva Pro」で簡単に作成する事が出来ます。出来上がった素材を背景を透過してダウンロードするだけです。
また、人物などの切り抜きも簡単にできますので、こちらの記事をご参照ください。
チェックポイント
透過素材だとアニメーションが美しい
見出しなどを透過素材にしておくと、背景色が変わってもそのまま使用できる
おしゃれなアイキャッチ
るきさんは非常にデザインセンスをお持ちです。アイキャッチもほぼアドバイスなしで素敵な作品を作られています。
アイキャッチもある程度の統一感をもって作成されているため、権威性のアップにつながっています。
上のアイキャッチは「レコメンド３」カテゴリー用にるきさんにプレゼントしたテンプレートです。ご自身でそっくりに作られて実際に使用してくれています。
この様なアイキャッチのテンプレートプレゼント企画などもブログデザイン部では行っています。興味がある方はぜひ、入部をご検討ください。
イラストの統一
RUKI BOOKSではサイト内のイラストを統一されています。
イラストを統一することで、サイト自体の権威性が上がる効果があります。統一感が出ることでしっかりと管理されたサイトだという印象になり権威性があがります。
RUKI BOOKSでは、ゆるくて人気の無料素材サイト「Linustock」を使用されています。
単色ですが、少し抜けた感じのイラストが揃っています。このイラストにテキストを加えることでなんとも言えない味がでる効果があります。
あなたもぜひ使用してみてはいかがでしょうか。
SWELLを活用
るきさんが使用されているテーマは大人気のワードプレステーマ「SWELL」。
フルワイドブロックというブロックを使用すれば、簡単に曲線や斜線のカラーブロックを作ることができます。
ここのブロックは実際にフルワイドブロックで作られています。
他のテーマだとCSSなどを組み込む必要があったりと手間がかかりますが、SWELLはブロックエディタで設定するだけで簡単に表現することができます。
特にCSSなどが難しい方でも簡単にお洒落なサイトがつくれるので、本当にはおすすめのワードプレステーマです。
SWELLの公式ページはこちら
RUKI BOOKSがさらなる進化
RUKIBOOKSはさらなる進化を遂げ、さらにお洒落に変貌しています。
その実態はぜひあなたの目で。モフモフ・ウネウネしています。
SWELLのフルワイドブロックの液状境界を「ウネウネ」させる方法は、ヤモヲさんの「POINT OF VIEW」の記事をご覧ください。あなたもウネウネできちゃいますよ！
POINT OF VIEW 略して、ポイビュ…
SVGモーフィングで「流体シェイプ」をウネウネさせる – SWELLカスタマイズ – POINT OF VIEW 略して、ポイ…
こんなSWELLユーザーに読んでほしい！ SWELLの「境界線の波形状」を使ってデザインしている流体シェイプに動きを加えたいSVGモーフィングについて知りたい SVGモーフィング… まとめ RUKI BOOKSがお洒落な理由
RUKIBOOKSがお洒落な理由
- メインビジュアルの女性とテキストでサイトアピール
- アニメーションで読者の目を引く
- 透明素材を使用してアニメーションを綺麗に
- アイキャッチがお洒落
- イラストを統一して権威性アップ
- SWELLで簡単、お洒落にデザイン
いかががでしたでしょうか。
るきさんのデザインアイデアをあなたも真似してお洒落なサイトを作ってみませんか？
ぜひ実際にRUKI BOOKSへ伺ってみてくださいね。
RUKI BOOKS
RUKI BOOKS | あなたと本をつなぐブックキュレーションブログ
あなたと本をつなぐブックキュレーションブログ。書評も要約もしないゆる～いブックレビューをネタバレなしで書いています。目指すは、読書を楽しむ方に向けたブックエンタ… 推奨デザインツール
当サイトでは、無料でもオシャレなデザインが簡単に作成できる、「 Canva 」を推奨しています。無料でも相当なレベルのデザインができるのですが、一度PROにすると無料には戻れなくなってしまいました。その秘密は、下記の記事に。
あわせて読みたい
【CanvaPRO】有料プランと無料プランを徹底比較！
Canvaをお使いのあなた。写真やイラスト素材を選ぶときに、ほとんどが有料のマークが付いていてイライラ…こんな経験していませんか？ 有料のCanva Proにすれば、このイ… Canvaを詳しく知る ➤
おすすめWordpressテーマ
私は、導入するだけで一気にお洒落になるWordpressテーマ「SWELL」をおすすめします。デザイン性はもちろん、その操作性は特筆ものです。
SWELLを愛用する私が実際に使用してきた内容を加えた、詳しい記事を書いています。ぜひご参照ください。
あわせて読みたい
大人気テーマ【SWELL】愛用者がその実力を本音レビュー
お洒落なブログを作りたい─あなたはそうお考えではないですか？ お洒落にするにはデザインセンスが必須。確かにそういうところもあります。なら、デザインのセンスがな… SWELLを詳しく知る ➤
お気軽にコメントください