【デザインの流れ】SWELLサイト型トップページの作り方解説

SWELLサイト型トップページ作り方

トップページをブログ型からサイト型にリニューアルしました。(使用テーマ:SWELL)

>トップページをみる

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

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

つきみ

SWELLユーザーに限らず、デザインのプロセスを見てみたい方、ブログの方向性に迷っている方など、参考にしていただけたら嬉しいです。

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

随時更新しているため、現在の最新トップページとは若干異なる部分がございます。

目次

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

SWELLサイト型トップページ

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

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

当ブログは、アフィンガーからSWELLに移行しています。(開設2ヶ月後)

【旧】ブログ型トップページ

SWELLブログ型トップページ
カスタマイズ前

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

【新】サイト型トップページ

SWELLサイト型トップページ
カスタマイズ後

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

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

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

きっかけは、さとしんさん(@__satoshin)が運営している「SWELLサイト集」。

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

つきみ

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

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

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

\デザインも思い切りリニューアル/

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よりスマホのサイズ調整。

プレビューでも自分のiPhone12でも表示されているのに、iPhoneSEで見ると文字が切れていることが発覚。(フォロワーさんの指摘で気づきました)

機種によって見え方が異なるので、注意が必要です。

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

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

SWELLサイト型カテゴリー

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

で作っている人が多いのですが、私はで作りました。理由も含めて解説していきます。

【案①】ドア→ボツ

SWELLサイト型カテゴリー

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

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

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

SWELLサイト型カテゴリー

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

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

【案③】シンプル→ボツ

SWELLサイト型カテゴリー

バナーっぽくなりました。シンプルでこれでもいいかな〜と思ったのですが、、、

→メインビジュアルの下に入れるとちょっと固い感じになってしまう…ボツ!

つきみ

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

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

SWELLサイト型カテゴリー

ゆるっと可愛い流体シェイプにしてみました!

流体シェイプとは?

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

流体シェイプ
不ぞろいな雰囲気も可愛い

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

最初はで試しましたが、の方が自由度が高く断然使いやすく感じました。

数や位置を細かく調整したい、透過画像を使いたい場合はカラムブロックがおすすめです。

つきみ

SWELLは次々に便利な機能がアップデートされるから本当に使いやすい!

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

アイキャッチにも流体シェイプを取り入れています。(一部)

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

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

SWELLサイト型見出し

インライン画像を選択すれば、見出し部分を任意の画像に変えることができます。

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

SWELLサイト型デザイン作成

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

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

つきみ

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

【サイト型デザイン制作】素材完成後、固定ページで更新

SWELLサイト型トップページ

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

新記事を作る感覚でスイスイできてしまうので、好みのレイアウトにアレンジしていきましょう。

つきみ

記事がある程度増えてきたら、随時カテゴリーを整理してカスタマイズしていくのがおすすめです。

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

参考サイト

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

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

参考サイト集

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

つきみ

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

サイト型にした結果

時間が溶ける

デザインにこだわってしまった結果、時間が溶けまくりました。

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

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

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

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

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

つきみ

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

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

SWELLレビュー記事

アイキャッチ画像の作り方

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

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

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