このサイトは記事内に広告を含む場合があります。広告や表現について

【美麗トップページ002】RUKI BOOKS|透過素材とアニメーション

ひさしぶりの投稿となりました、「美麗トップページ」。

更新忘れてるんじゃ?と思われた方も多いのではないでしょうか。

特に大した理由もなく、ただひたすらに忙しかっただけです(言い訳)

以前の紹介記事はコチラ

しかし、今回紹介するブログはそんな忙しい中でも紹介したい、とても洗練されたサイトです。

では、なぜそんなお洒落なサイトになっているのでしょうか?

理由を考えて行くことで、あなたのサイトのヒントにしてくださいね。

目次

RUKI BOOKS

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

簡単に言えば「書評ブログ」。でも絶対に内容をネタバレしない、その本を総合的に評価するサイトであえて運営者は「書評」という言葉を使用しません。

今回は紹介しませんが、記事の書き方もお洒落。その本がどういう本なのか、評価や図解で説明してくれます。とても読みやすく、わかりやすいので参考になります。

また、「レコメンド3」と銘打って、そのジャンルの本を3冊紹介。同じジャンルでも方向性や解釈が違うことがありますよね。その3冊を読んでおけばとりあえずそのジャンルの方向性を網羅できるという取り組みもされています。

運営者

るき

RUKI BOOKS 管理人
年間120冊程度の本を読む
好きなもの:本屋、図書館、カフェ、コーヒー、夏、朝
趣味:投資、アクアリウム
座右の銘:ユーモア、誠実さ

プロフィールより

るきさんは年間120冊も本を読む読書家です。そんなるきさんが評価してくれるのだから、おもしろくないわけがないですよね!

るきさんは私が運営するデザインコミュニティ、「ブログデザイン部」にも所属してくれています。

もともとセンスをお持ちだったのですが、最近はデザインにも非常に興味を持たれて、デザイン本を読まれたりと勉強をすすめ、めきめきとデザイン力をつけてきている期待の新星です。

そんなるきさんが、楽しみながら作ったサイトを紹介していきます。

RUKI BOOKSがお洒落な理由 6選

まずはサイトを確認していただきたい!

実際に伺って頂きたいのですが、動画もご用意しましたのでご参照ください。

RUKIBOOKSのトップページ

サイトはこちらからどうぞ。

目を引くメインビジュアル

RUKIBOOKSのメインビジュアル
メインビジュアル

サイトを開いてまず目を引くのが、大切そうに本を抱きかかえる女性と「本が好き。」というキーワード。

これだけで、RUKI BOOKSがどういうサイトなのか一目瞭然。

さらに、女性だけが左から右へスライドしてくるアニメーションを使用することで、思わず手を止めてしまうような仕組みになっています。

チェックポイント

サイトの内容に合わせた写真とテキストでどういうサイトなのか表現
アニメーションを使用することで目を止めさせる

アニメーション

次に目を引くのがアニメーション。

見出しやイラスト、記事などが上からどんどん降ってきます。

アニメーションは思わず見てしまう特性があるため、滞在時間を伸ばす効果があります。

読者に見てもらいたい部分にアニメーションを入れることで、手を止めてもらえます。

るきさんは存分にアニメーションを使って表現されていますね。

チェックポイント

アニメーションは読者の手を止める効果がある!

透過素材を使用する

るきさんはアニメーションしてくるイラストや見出しなどをすべて透過素材で行っています。

透過素材とはイラストや文字の背景が透明になっている素材の事。
基本的に.png形式の画像になる。

透過素材にすることで、背景の色違いの場所でも違和感なく美しくアニメーションしてくることができます。

また、デザイン変更で背景色などが変わっても、そのまま使用できる場面が増えてくるのでとてもおすすめの手法です。

透過素材は「Canva Pro」で簡単に作成する事が出来ます。出来上がった素材を背景を透過してダウンロードするだけです。

また、人物などの切り抜きも簡単にできますので、こちらの記事をご参照ください。

チェックポイント

透過素材だとアニメーションが美しい
見出しなどを透過素材にしておくと、背景色が変わってもそのまま使用できる

おしゃれなアイキャッチ

るきさんは非常にデザインセンスをお持ちです。アイキャッチもほぼアドバイスなしで素敵な作品を作られています。

アイキャッチもある程度の統一感をもって作成されているため、権威性のアップにつながっています。

上のアイキャッチは「レコメンド3」カテゴリー用にるきさんにプレゼントしたテンプレートです。ご自身でそっくりに作られて実際に使用してくれています。

この様なアイキャッチのテンプレートプレゼント企画などもブログデザイン部では行っています。興味がある方はぜひ、入部をご検討ください。

チェックポイント

アイキャッチを統一することで権威性があがる

イラストの統一

RUKI BOOKSではサイト内のイラストを統一されています。

イラストを統一することで、サイト自体の権威性が上がる効果があります。統一感が出ることでしっかりと管理されたサイトだという印象になり権威性があがります。

RUKI BOOKSでは、ゆるくて人気の無料素材サイト「Linustock」を使用されています。

単色ですが、少し抜けた感じのイラストが揃っています。このイラストにテキストを加えることでなんとも言えない味がでる効果があります。

あなたもぜひ使用してみてはいかがでしょうか。

チェックポイント

イラストを統一することで権威性が上がる

SWELLを活用

るきさんが使用されているテーマは大人気のワードプレステーマ「SWELL」。

フルワイドブロックというブロックを使用すれば、簡単に曲線や斜線のカラーブロックを作ることができます。

ここのブロックは実際にフルワイドブロックで作られています。

他のテーマだとCSSなどを組み込む必要があったりと手間がかかりますが、SWELLはブロックエディタで設定するだけで簡単に表現することができます。

特にCSSなどが難しい方でも簡単にお洒落なサイトがつくれるので、本当にはおすすめのワードプレステーマです。

SWELLの公式ページはこちら

RUKI BOOKSがさらなる進化

RUKIBOOKSはさらなる進化を遂げ、さらにお洒落に変貌しています。

その実態はぜひあなたの目で。モフモフ・ウネウネしています。

SWELLのフルワイドブロックの液状境界を「ウネウネ」させる方法は、ヤモヲさんの「POINT OF VIEW」の記事をご覧ください。あなたもウネウネできちゃいますよ!

まとめ RUKI BOOKSがお洒落な理由

RUKIBOOKSがお洒落な理由
  • メインビジュアルの女性とテキストでサイトアピール
  • アニメーションで読者の目を引く
  • 透明素材を使用してアニメーションを綺麗に
  • アイキャッチがお洒落
  • イラストを統一して権威性アップ
  • SWELLで簡単、お洒落にデザイン

いかががでしたでしょうか。

るきさんのデザインアイデアをあなたも真似してお洒落なサイトを作ってみませんか?

ぜひ実際にRUKI BOOKSへ伺ってみてくださいね。

どんぐり所長のおすすめツール

どこでも、どんなデバイスでも順位チェック

ブログ記事の順位を確認していますか?どんなキーワードが上下しているのか知る事はブロガーでは必須と言えます。

ほとんどの方がダウンロード型の順位チェックツールを使用されていますが、私はコレ。「Nobilista」。クラウド型のチェックツールです。

クラウド型とは、ネット上にあるサーバーにデータが保存されている順位チェックツールです。従って、お家のパソコン以外でも情報にアクセスできちゃうんです。これが想像以上に快適で、一度体験すると戻れなくなっちゃう。詳しい記事を書いていますので是非読んでみてください。

Nobilistaの詳しい記事はこちら >

実は私、Nobilistaの公式アンバサダーをさせて頂いています。使いだしたら超気に入ってしまって、気づいたらアンバサダーになっていました。そんな私が、おすすめする「Nobilista」。今なら7日間無料でお試しができます。クレジットカードなどの情報を入れなくても試せるので、ぜひあなたにも試してほしい。

\場所を選ばない快適さを体験して/

Nobilista公式サイト

当サイト推奨 デザインツール

当サイトでは、ブログ初心者でも簡単・無料で美麗なデザインが作成できる、オンライン画像作成フォーム「Canva」を推奨しています。数万点の素材やフォントが用意されていて、選ぶだけで簡単にプロ並みのデザインを作成する事ができます。これから先、会社員の仕事でも使用する事になるかもしれないほど普及が広まっています。覚えるなら早い方がいいですよ!

当サイトのデザインは、SWELLで再現可能

私はSWELLを2年使用してきました。現在4つのサイトでSWELLを使用しています。
SWELLを使用する理由は、簡単・綺麗・速い
実際このトップページも、SWELLの標準機能だけでデザイン。
お洒落なブログを作りたいあなたにピッタリのWordPressテーマです。
私が実際に使用して実感したSWELLの特徴は以下。

  • 完全ブロックエディタ対応
  • 直感で使える操作性
  • 便利な専用ブロックを多数用意
  • お洒落なトップページが簡単に作れる
  • 最速レベルのページスピード
  • 一度購入すれば複数サイトに何度でも使用可能
  • ユーザーの利便性を考える熱意の運営者
  • SWELLを紹介すればアフィリエイト報酬が貰える(購入者のみ参加可)
  • 販売価格 ¥17,600(税込)

唯一の欠点は価格の高さ。しかしそれは、SWELLがハイクオリティだから。
そして、運営者がとびきりの対応をしてくれる必要経費。

私が実際にSWELLを使用して感じた、本音レビューはこちら

SWELLにはアフィリエイトプログラムがあり、紹介すれば利益を得ることもできます。
よく、「アフィリエイトがあるから紹介しているんでしょ。」と言われますがこれは違います。
惚れ込んだWordPressテーマに、たまたまアフィリエイトがあっただけ。
あなたもSWELLを体験すれば、きっと紹介したくなります。

\圧倒的な操作性を体験せよ/

あなたも今日からSWELLER!

トップページへ戻る

お気軽にコメントください

コメントする

このサイトは reCAPTCHA と Google によって保護されていますプライバシーポリシー利用規約 申し込み。

The reCAPTCHA verification period has expired. Please reload the page.

目次