- これで解決！ ブログのトップページをおしゃれにしてみよう！｜SWELL編
－本記事の要約と結論－
本記事を読めば、「ブログのトップページをおしゃれにしてみよう！｜SWELL編 」が、少しご理解いただけるようになります。
ブログのトップページって大事ですよね！「少しでも訪問者さんの離脱を避けたい」ですし、「他のページも見てもらいたい」、ブログ運営者なら誰もが思うことでしょう。そんな時、トップページはサイト回遊の際に起点となるページ。だからこそ、ちょっとでも魅力的なトップページにしたいものですよね！
もちろんユユーザビリティを考えれば、構成がしっかりしているのが一番大切ですが、見た目だってすごく大事！ちょっとした工夫で差別化ができるのであれば取り入れてみたいと思いますよね！
今回、当サイトではトップページにちょっとした湾曲部分を作ってみました。「それがおしゃれ？」と言われれば話は終わってしまいますが、やってる方がほぼいないのでもしかしたらちょっと目立つかもしれません。
無料のInkscapeという便利なデザインツールを使いますので負担もありません。作り方を紹介していますので、興味のある方は参考にしてくださいね！
今回この方法がいいかどうかは別として、他サイトとはちょっと違うブログのトップページの構築を実践すれば、新しいユーザーが増えたり、また離脱が減ったりする可能性があります。創意工夫で取り組んでいきたいですよね！
メチャじじ記事も７〜8記事書いたし、ちょっとトップページをおしゃれにしたいと思っているのじゃ！！！
htmlとかcssは、分からないので、簡単にできる方法はないかな？
チョイじじ『ちょっとでも目に留まってくれたらいいな～』
『すぐに離脱するんじゃなくてもうちょっと見てもらいたいな～』
『ちょっとおしゃれにしたいな～』
ひろおじそれなら、このブログで実践した方法をみんなに紹介するよ。このサイトでも使っているよから紹介しやすいよ・・・
この記事では、ブログのトップページをおしゃれにしてみよう！【SWELL編】をお話をしていきます。
- 人と違ったトップページにしてみたい方
- 創意工夫をするのが好きな方
- 画像を少し編集できる方
早く希望の記事箇所に到達したい方はコチラ
- 当サイトブログのトップページはおしゃれになってるかな？
- ブログのトップページのイメージは結構大事かなって思う理由
- トップページをおしゃれに！実践していきましょう！！
- おしゃれなブログのトップページになったかな？
- Inkscapeのダウンロード、インストール手順
当ブログでは、初心者が快適なブログ運営をするために必要な『エックスサーバー』と『SWELL』の説明。そしてWordPress導入後、10記事書くまでに必要なWordPressとSWELLの設定、必要なプラグイン等の徹底解説をしております。ぜひご活用くださいませ！
当サイトブログのトップページはおしゃれになってるかな？
当サイトのトップページをパソコンで一度見てもらいたいのですが、（すいませんスマホの方は見えませんです）
下図の矢印の部分が、ゆっくり湾曲しているのがわかると思います。
どうでしょうか？
あんまりこういう施しをしてあるサイトはあまり見ないので、
『ちょっと変わっているな〜』って思いませんか？
今ご覧の中で、もしちょっとでも・・・・
- あ、なんとなくいいなあ～
- 訪問してすぐの離脱が下がるかも～
- ちょっとおしゃれに見える！
- 自分もやってみたい！
と感じられた方！
今日はこのデザインの作り方をシェアしていきますので、興味のある方は最後までご覧ください。
最終的には、こんな感じのトップページにできるよう解説していきます。
（サンプルなので、画像は適当に選んでありますから、その辺はご容赦下さい。）
ブログのトップページのイメージは結構大事かなって思う理由
ブログサイトでは、ユーザーが訪問していただけた場合、記事に興味を持ったり、執筆者に関心を抱いたりすれば、そのブログサイトサイトの他の記事を見て頂けるわけですが、どんなサイトなのか知るためには、トップページを閲覧することになります。
トップページは、ブログサイトの集約みたいな感じになってますから、ここでの印象はやはり大きいものがあると思います。
メチャじじ流し読みが多いのじゃ・・・・
僕自身も調べものしたり、ネットサーフィンしていますと、やっぱり目に留まるサイトって、何かがちょっと他と違うのですよね。最終的には離脱するとしても、滞在時間が長くなるとか、ブックマークしておこうとか、全く興味のないサイトとはちょっと違った行動になります。
もちろんブログサイトでは、記事が一番大事なのでしょうが、イラストや画像が目をひくこともあれば、全体のバランスが優れているサイトや、なんか雰囲気のあるサイトだったり・・・
でも他のサイトがあんまりやってないことですと、余計に目に留まるかもしれません。
チョイじじブログサイトの全てが、おしゃれである必要はないと思いますが、トップページの一部分でもこだわりがあると、訪問者さまにも気持ちが伝わるかもしれませんね。
ブログ運営に不可欠な『お問い合わせフォームの設置』ができるようになります。SWELLに相性のいいプラグインの紹介と導入方法を解説しておりますのでぜひ参考にしてくださいね。
トップページをおしゃれに！実践していきましょう！！
今回取り組むに当たって、用意するもの。
イラストツールです。完全に無料で使えて、なにより非常に高性能です。
プロが使っているAdobe Illustratorが王道だと思いますが、プロ用の価格なので個人がちょっと使うだけにはコストパフォーマンスが悪すぎます。
また、デザインツールCANVAは、素材を集めて貼り付けたりすることは得意なんですが、細かい事があまり得意でありませんし、無料版ですと制限が多く自由度が低いです。
今回使用するのは、このInkscapeだけです。
もしイラストレーターを持ってなくて、ちょっとした図形などを書いたりするなら、このInkscapeがおすすめです。（無料）
Inkscape（インクスケープ）は、ベクター形式の画像を作成・編集できるオープンソースのグラフィックソフトウェアです。Windows、macOS、Linuxで動作し、無料で利用できます。
Canvaが使えることで、魅力的な画像やイラストをブログに配置することができるようになります。Canvaが上手く使いこなせるようになり、ユーザーにとって満足度の高いコンテンツになれば、ワンランク上のブログ運営が可能になります。
SWELLでのブログの構造をみてみよう。
まず構造をみていきましょう。
下のデモサイトはSWELLさんの公式サイトの画面ですが、
- ヘッダー
- トップページ（メインビジュアル）
- トップページ（上部）
こんな区分けになっていると思います。
当ブログ(下部)では、区分けがこんなイメージです。
簡単に言うとメインビジュアル②で湾曲を作ってしまっているという事です。
メインビジュアル②の下部分のクリーム色と③のエリアの背景色（クリーム色）が合わないと綺麗に見えません。
今日はこの②のメインビジュアルを作っていきましょう。
おしゃれなブログになるかな？【実践編】
Inkscapeを使ってメインビジュアル画像を作っていきましょう。
（もちろん、Adobe Illustratorをお持ちの方はそちらを使ってください）
Inkscapeの『新規ドキュメント』を立ち上げます。
『ファイル』『ドキュメントのプロパティ』を開きます。
- mmからpxに変更します。
- 1600x300pxにします。
チョイじじ画像のこういった赤の囲みもInkscapeで作成しているんだよ！
- 短形ツールをクリック
- 適当な四角形を書いてみます。
- mmになっているので、pxに変更します。
- 1600x300pxにしてます。
②の四角形は、1600x300pxになったものです。
色の設定は、フィル（塗り）とストローク（線）で変更できますので色々試してください。
- x軸、y軸を0にします
- 背景色に色をセットしてみました。
今制作しているビジュアル画像の下部の色とサイトの背景の色が合うようにブログサイトの背景色を確認していきます。
『カスタマイズ』『サイト全体設定』『基本カラー』
サイト全体の背景色になりますので、この色を先程の四角形に合わせます。
（ご自分のサイトの背景色を確認してみてください）
今回は作業部分の違いが分かりやすいように変更部分を赤色にしてみました。
- 前の要領で短形から四角形を作る
- 幅、高さを1600x270pxにする
- 色を今回は赤系の色にしてます
- 背景色の四角形（1600x300px)を右クリックでロック（固定）
- 赤の四角をx,yを0で背景色の上に重ねました。
見にくいですが、背景色の四角形の上に赤系の四角形が乗っています。
- ノードツールをクリック
- オブジェクトをパスへをクリック
- このマークがでてきたら編集できます。
赤色の下面を動かして変形させてみました。
チョイじじ慣れないとちょっと分かりにくいと思うけど、いろいろ触ってみてね！
『新規ノードを選択セグメントに挿入』をクリックして追加するとノードが追加されるのでより複雑な図形ができます。
『ファイル』『エクスポート』を選択
右下に下部のフォルダマークを選択。
- inkscapeSVGは、このドキュメントの保存拡張子です。
- 画像として書き出すには、ポータルネットワークグラフィック(png)を選択してください。
使いこなせればコストを抑えながら質の高い記事やサイトが構築できるようになり、バランスよく統一感などが演出できればライバルよりちょっとだけ上をいくブログが構築できます。
おしゃれなブログのトップページになったかな？
SWELLのメインビジュアルをこの画像と変更してトップサイトに表示しました。
『カスタマイズ』『トップページ』『メインビジュアル』『スライド画像[1]（PC）』
で画像が変更できます。
適当に作ったのですが、『あれ、これでもいいかな？』って思うぐらい意外と良くないですか？
下の画像は、実は上の赤い画像と同じ形なんですよね。写真画像をこの形で切り抜いてアップしてみました。
これも、なかなかおしゃれじゃないでしょうか？
（画像は適当に選んだので、内容とは合っていませんが・・・・）
切り抜きしたい画像の上に短径で作った加工短形を配置
- 短形ツールで短形を配置
- 選択ツールで両方とも選択
- マウスの右クリックで
マウスの右クリックで『クリップを設定』
このように切り抜きます。
- 切り抜きたい画像は必ず下層。上層に短形を配置
- 下層、上層の入れ替えは、右上の『レイヤーとオブジェクト』で変更できます。
- 先程の『女性が新聞を読んでいる画像』は、最初に作成した赤の短形オブジェクトをこの画像の上に配置しマウス右クリックで『クリップを設定』です。
Inkscapeのダウンロード、インストール手順
Inkscapeは、メール等の登録もなくそのままダウンロード、インストールして使えます。
オススメのInkscape導入方法は以下の手順です。
- Inkscapeのダウンロード方法
- Inkscapeのインストール方法
『ダウンロード』『Current Stable Version』をクリック
ビット数が「64bit」か「32bit」かを選択します。
ビット数はご自身のパソコン環境によって異なりますので、一度確認してから選択してください。
拡張子『exe』を選択しクリック。
ダウンロード完了しますとインストールが始まります。
インストールが始まらなければ、ダウンロードした中からexeファイルを見つけてダブルクリック。
後は、順次進めていけばインストールが完了します。
これで、インストールまで終了します。
まとめ：ブログのトップページをおしゃれにしてみよう！｜SWELL編
今回は、ブログのトップページをおしゃれにしてみよう！【SWELL編】について解説しました。
ユーザーが訪問していただいた場合、記事に興味を持ったり、執筆者に関心を抱いたりすれば、どんなサイトなのか知るためには、トップページを閲覧することになります。トップページはブログの集約みたいな役割を果たすので、見栄えも大切な要素になります。
見栄えがいいのかどうかわかりませんが、当サイトで取り組んだメインビジュアル部分のちょっとした装飾の仕方をシェアしました。
よかったら、参考にしてくださいね！
具体的な、気になる記事箇所はコチラ
- 当サイトブログのトップページはおしゃれになってるかな？
- ブログのトップページのイメージは結構大事かなって思う理由
- トップページをおしゃれに！実践していきましょう！！
- おしゃれなブログのトップページになったかな？
- Inkscapeのダウンロード、インストール手順
このブログのトップページをおしゃれにしてみよう！【SWELL編】が実践できることで、ちょっとだけブログのトップページがおしゃれになり、少しでもサイトに興味を持ってもらったり、ユーザーの離脱が減ったりするかもしれません。
特に個人的なブログの場合、表示された一瞬で訪問者さまにイメージを伝える必要があります。ファビコンは視覚的にブログの特徴を伝える事ができます。また、発生するデメリットがないのも特徴です。
また、「ブログのトップページをおしゃれにしてみよう！【SWELL編】」が終わりましたら、次は「SWELLでメインビジュアルを動画にする方法」にチャレンジしてみましょう。
詳しいやり方は下記の記事で紹介しているので、あわせて読んでみてくださいね。
当ブログでは、初心者が快適なブログ運営をするために必要な『エックスサーバー』と『SWELL』の説明。そしてWordPress導入後、10記事書くまでに必要なWordPressとSWELLの設定、必要なプラグイン等の徹底解説をしております。ぜひご活用くださいませ！