【デザインの流れ】SWELLサイト型トップページに変更するまで

トップページをブログ型からサイト型にリニューアルしました。

>トップページをみる

サイト型にするまでのデザイン制作の流れ、ボツにした案、悩んだ経緯などをまとめてみましたので、紹介します。

カスタマイズ記事はすでにたくさん出ていて私の出る幕はない…と思い、ちょっと趣向を変えた内容となっております。

SWELLはカスタマイズが簡単=デザインを楽しめるのが魅力!楽しすぎて迷走しすぎた経緯も含め、ご覧ください。

つきみ

SWELLに限らず、オシャレなブログが作りたい方、参考にしていただけたら嬉しいです。

目次

トップページをブログ型からサイト型にした理由

SWELLサイト型トップページ

ブログ型トップページ(旧)

SWELLブログ型トップページ

今までのトップページは、新着記事が投稿順に並ぶ「ブログ型」。

SWELLに移行した段階で自動的に作られるので、これまでずっと「ブログ型」のままにしていました。

サイト型トップページ(新)

SWELLサイト型トップページ

一方、カテゴリーごとに情報を整理したトップページが「サイト型」。

どんなブログか一目で判断でき、目的の記事を探しやすくしたサイトデザインです。

サイト型にしたいと思った理由

  1. オリジナリティのあるブログにしたい
  2. SWELLなら簡単にサイト型にできる

オリジナリティのあるブログにしたいと思ったきっかけは、さとしんさん(@__satoshin)のブログ「SWELLサイト集」。

SWELLサイト集(さとしんさんのブログ)

当ブログも掲載していただきました!そして、ずらっと並ぶトップページを見てふと思ったことが…

つきみ

ブログ型のトップページだと印象がかぶるなぁ…サイト型は個性があっていいなぁ…

そんなわけでサイト型にしたい思いに火がつき、リニューアルすることにしました。

SWELLなら難しい知識は入りません。簡単に変更することができます。

PC・スマホ比較

SWELLサイト型トップページ
さとしんさん「SWELLサイト集」掲載

PCもスマホも一目瞭然、まるで印象が変わりました!

\簡単にサイト型トップページが作れる/

swell

サイト型トップページ全体の構成

まずはじめに、全体の構成を解説していきます。

>実際のトップページはこちら

トップページ構成

SWELLサイト型構成
SWELLサイト型構成
SWELLサイト型構成

大きく8箇所のエリアを作成します

  1. メインビジュアル
  2. カテゴリー
  3. ピックアップ
  4. 新着記事
  5. お気に入り
  6. お部屋
  7. SWELL
  8. プロフィール

メインビジュアルはカスタマイザーから設定。他のエリアは固定ページを作成し、フルワイドブロックを使っています。

つきみ

設定はとても簡単、時間をかけたのは素材作り。各エリアの制作過程を順番に紹介します。

【デザイン制作】メインビジュアル

SWELLメインビジュアル

トップページの印象を大きく変えるのがメインビジュアル。

無くても大丈夫な部分ですが、オリジナリティを出したかったので作ることにしました。

デザインツールはAdobe Illustratorを使っています。

ブログのコンセプトからビジュアルをイメージする

SWELLメインビジュアル

どんなデザインにするか、まずはブログのコンセプトからイメージしてみることに。

当ブログは「オタクだけどミニマルに暮らしたい」というのがメインテーマ。

洗練されたミニマリストのイメージではなく、シンプルだけど遊び心を取り入れたデザインにするのが課題です。

【案①】丘の上の家→ボツ

SWELLメインビジュアル

最初に描いたのは家のイラスト。暮らしをつくる(えがく)イメージで、丘の延長線上にペンを入れました。

実際に設定してサイトを確認したところ、全体のバランスが難しくてボツに。

【案②】雲の家→ボツ

SWELLメインビジュアル

次に考えたのは月から連想した「雲の家」のイメージ。ドラえもんの映画「雲の王国」を思い出しながら作りました。笑

何か物足りなさを感じたのでボツ。

【案③】月と雲→決定

SWELLメインビジュアル

ブログ名の月を組み合わせた方がしっくりくるかも?ということで着地したデザイン。

「Welcome!」の文字を入れることで月に動きがでて遊び心も出せた気がします。

つきみ

もはや自己満の世界です。

【失敗談】メインビジュアルのサイズ調整

実は難しいのがサイズ調整。PCとスマホ別々の画像を作り、上下左右の距離感を調整をしました。

いざ更新してみると問題発生!Twitterでフォロワーさんからこんなメッセージが。

プレビューでも自分のiPhone12でも表示されているのに、iPhoneSEだと見切れる!?すぐに修正せねば!

ということで、調整したら御二方に確認してもらって更に調整するという、超アナログ方式を決行。笑

カスタマイザーからメインビジュアルの高さ数値を変更することで解決しました。

つきみ

さぅさん(@Sau_IamPiero)、ひげさん(@higepo_n)、ありがとうございました!

【デザイン制作】カテゴリーバナー

SWELLサイト型カテゴリー

お次はメインビジュアルの下のカテゴリー作り。

ピックアップバナーで作っている人が多いのですが、私の場合はカラムブロックで作りました。理由も含めて解説していきます。

【案①】ドア→ボツ

SWELLサイト型カテゴリー

ドアから部屋に入っていくイメージで作った最初の案。

クリックしてもらうのが目的のバナーなのに、なんか分かりにくいかも…

【案②】吹きだしイラスト→ボツ

SWELLサイト型カテゴリー

アイキャッチ感覚で作った画像。

カテゴリーバナーっぽくないのでボツ。この案は別の素材として活用することにしました。(後述で解説)

【案③】シンプル→ボツ

SWELLサイト型カテゴリー

バナーっぽくなりました。

シンプルでこれでもいいかな〜と思ったのですが、メインビジュアルの下に入れるとちょっと固い感じになってしまう…

つきみ

そろそろ「ブログ書け」という声が聞こえてきそうな迷走ぶり。

【案④】流体シェイプ→決定

SWELLサイト型カテゴリー

前々から気になっていた流体シェイプにしてみました!

流体シェイプとは

流体シェイプ

なめらかな曲線で描く図形。四角や正円と違ってやわらかい自由な雰囲気を演出することができます。

ブログ名「つきみにまる。」に「まる」が入っていたり、「オタクだけどミニマリスト」という型に囚われないイメージに合うかな〜と。

最初はピックアップバナーで試しましたが、数や位置を自由に調整できるカラムブロックで作り直しました。

公式サイトで設定を確認できます

>カラムブロックの機能解説

アイキャッチも流体シェイプに変更

【デザイン制作】各エリアの見出し

SWELLサイト型見出し

サイト内の雰囲気を統一したかったので、見出しの画像を作りました。

インライン画像で見出しを画像に変換しています。

【デザイン制作】各エリアの画像

SWELLサイト型デザイン作成

投稿リストの前に入れる画像を作成しました。カテゴリーバナーのボツ案を少々アレンジしたものです。

漫画大好きオタクなので、吹き出し風にアレンジしています。

つきみ

やりたいようにやってみるスタンス。

素材完成→固定ページで更新

SWELLサイト型トップページ

素材が完成したら固定ページでカスタマイズしていきます。

新記事を作る感覚でスイスイできてしまうので、ブログの内容に合わせてアレンジしていきましょう。

サイト型を作る上で参考にしたもの

参考サイト

デザインに関しては企業サイトを見ることを強くおすすめします。

当たり前ですが、やっぱりプロは違う…。見てるだけで楽しくなるオシャレなサイトが世の中にはたくさんあることに気づかされます。

参考サイト集

設定→公式サイトや同じテーマを使っている人、デザイン→企業サイト、という感じで参考にしました。

つきみ

もちろんパクリはNGです。吸収して自分なりに工夫することが大事。

サイト型にした結果

時間が溶ける

デザイン作業が好きでついこだわってしまった結果、時間が溶けまくりました。笑

半月ほど新記事の更新が止まったにも関わらず、Twitterでは想像以上の反響をいただきありがとうございます。

サイト型にした結果、ブログのモチベーションが爆上がり!

サイト型にして良かったこと

  • オリジナリティを出せたことでブログに愛着が湧いた
  • トップページを見てくれる人が増えた
  • PVが伸びた

サイト型への変更を考えている方、オシャレなブログが作りたい方、ちょっとしたヒントになれば幸いです。

つきみ

せっかく苦労して立ち上げたブログ。楽しんで続けていきましょう!

\簡単にサイト型デザインが作れる/

SWELLレビュー記事

使用しているデザインツール

\よろしければポチッと応援お願いします/

つきみにまる。 - にほんブログ村
よかったらシェアしてね!
目次
閉じる