メチャじじ設定方法はわかったけれど、なんだか自分のブログは『どこかで見たようなデザイン』で止まっている気がする…
チョイじじ不器用なりに、もう少し自分らしさや『おしゃれな雰囲気』を出してみたいんだ。何かいいアイデアはないかな？
お城（ブログ）の玄関であるメインビジュアル。SWELLを使えば、誰でも簡単に形にすることはできます。でも、そこからさらに一歩踏み込んで「あなたらしさ」という魔法をかけるには、ちょっとした「創意工夫」のスパイスが必要です。
「おしゃれにするなんて、センスがない自分には無理だ……」と諦める必要はありません。
僕自身、決してデザインのプロではありませんが、不器用なりに試行錯誤を繰り返す中で、「こうすればもっと良くなる！」という小さな発見をたくさん見つけてきました。
この記事では、僕が実際に自分のお城で試してみた、メインビジュアルを劇的におしゃれに変える創意工夫のアイデアを、2枚の画像（今日やる内容のイメージ）を交えてじっくりと公開します。
当サイトのトップページをパソコンで一度見てもらいたいのですが、（すいませんスマホの方は見えませんです）
下図の矢印の部分が、ゆっくり湾曲しているのがわかると思います。
どうでしょうか？
あんまりこういう施しをしてあるサイトはあまり見ないので、
『ちょっと変わっているな〜』って思いませんか？
最終的には、こんな感じのトップページにできるよう解説していきます。
（サンプルなので、画像は適当に選んでありますから、その辺はご容赦下さい。）
- 視覚を整えるアイデア： 画像一枚に「奥行き」や「物語」を感じさせる、ちょっとした配置のコツ。
- 心を動かすキャッチコピー： 読者さんの足を止める、ひろおじ流の言葉の添え方。
- SWELL機能を使い倒す： 標準機能に「ひと手間」加えるだけで、既製品感をなくすテクニック。
👉 ひとつだけでも受け取ってもらえれば、うれしく思います！
おしゃれの正体は、高価な素材を使うことではなく、訪れる人を想って注いだ「ひと手間の愛情」です。
不器用な僕たちは、最初から完璧なアートを作る必要はありません。まずは、「この色の方が落ち着くかな？」「この言葉なら喜んでくれるかな？」と、自分のお城を慈しむようにいじってみてください。
主（あるじ）であるあなたの手跡が残るメインビジュアルには、どんなに綺麗な写真よりも強い「惹きつける力」が宿ります。さあ、一緒に創意工夫という名の模様替えを楽しみましょう！
🌱 まだ、自分のお城をもっていない方へ！
もし、この記事を読んでいるあなたが、「まだ自分のお城（ブログ）を持っていないけれど、書く準備だけはしておきたい！」という段階なら、まずはそのワクワクした気持ちを形にしてみませんか？
🚀 【最短ルート】今すぐ始めたい方は、コチラ！
【 重要 】
手順を調べる時間は最小限に…、WordPressを最短10分でブログを開通させたい方は、こちらの「最短・画像付きマニュアル」から読み進めてみてくださいね！
シニアでも失敗なく、誰でもできるやり方を解説していますよ！ それは、新しい世界を知るための切符です…。
さあ、僕と一緒に、あなたの「自分のお城」の基礎工事を始めましょう！
確認編：SWELLのメインビジュアルの構造と、今回使うもの…
SWELLでのブログの構造をみてみよう。
まず構造をみていきましょう。
下のデモサイトはSWELLさんの公式サイトの画面ですが、
- ヘッダー
- トップページ（メインビジュアル）
- トップページ（上部）
こんな区分けになっていると思います。
当ブログ(下部)では、区分けがこんなイメージです。
簡単に言うとメインビジュアル②で湾曲を作ってしまっているという事です。
メインビジュアル②の下部分のクリーム色と③のエリアの背景色（クリーム色）が合わないと綺麗に見えません。
今日はこの②のメインビジュアルを作っていきましょう。
今回取り組むに当たって、用意するもの。
イラストツールを使います。一般的にはAdobe Illustratorが王道だと思いますが、プロ用の価格なので個人がちょっと使うだけにはコストパフォーマンスが悪すぎます。
そこで、今回使うのは、👉 【 INKSCAPE 】です。
イラストツールです。完全に無料で使えて、なにより非常に高性能です。
Inkscape（インクスケープ）は、ベクター形式の画像を作成・編集できるオープンソースのグラフィックソフトウェアです。Windows、macOS、Linuxで動作し、無料で利用できます。
ひろおじ最後の章で、ダウンロード＆インストール方法も載せておきますね！
Canvaが使えることで、魅力的な画像やイラストをブログに配置することができるようになります。Canvaが上手く使いこなせるようになり、ユーザーにとって満足度の高いコンテンツになれば、ワンランク上のブログ運営が可能になります。
実践編-1：メインビジュアル画像の作成
Inkscapeを使ってメインビジュアル画像を作っていきましょう。
（もちろん、Adobe Illustratorをお持ちの方はそちらを使ってください）
Inkscapeの『新規ドキュメント』を立ち上げます。
『ファイル』『ドキュメントのプロパティ』を開きます。
- mmからpxに変更します。
- 1600x300pxにします。
チョイじじ画像のこういった赤の囲みもInkscapeで作成しているんだよ！
- 短形ツールをクリック
- 適当な四角形を書いてみます。
- mmになっているので、pxに変更します。
- 1600x300pxにしてます。
②の四角形は、1600x300pxになったものです。
色の設定は、フィル（塗り）とストローク（線）で変更できますので色々試してください。
- x軸、y軸を0にします
- 背景色に色をセットしてみました。
今制作しているビジュアル画像の下部の色とサイトの背景の色が合うようにブログサイトの背景色を確認していきます。
『カスタマイズ』『サイト全体設定』『基本カラー』
サイト全体の背景色になりますので、この色を先程の四角形に合わせます。
（ご自分のサイトの背景色を確認してみてください）
今回は作業部分の違いが分かりやすいように変更部分を赤色にしてみました。
- 前の要領で短形から四角形を作る
- 幅、高さを1600x270pxにする
- 色を今回は赤系の色にしてます
- 背景色の四角形（1600x300px)を右クリックでロック（固定）
- 赤の四角をx,yを0で背景色の上に重ねました。
見にくいですが、背景色の四角形の上に赤系の四角形が乗っています。
- ノードツールをクリック
- オブジェクトをパスへをクリック
- このマークがでてきたら編集できます。
赤色の下面を動かして変形させてみました。
チョイじじ慣れないとちょっと分かりにくいと思うけど、いろいろ触ってみてね！
『新規ノードを選択セグメントに挿入』をクリックして追加するとノードが追加されるのでより複雑な図形ができます。
『ファイル』『エクスポート』を選択
右下に下部のフォルダマークを選択。
- inkscapeSVGは、このドキュメントの保存拡張子です。
- 画像として書き出すには、ポータルネットワークグラフィック(png)を選択してください。
使いこなせればコストを抑えながら質の高い記事やサイトが構築できるようになり、バランスよく統一感などが演出できればライバルよりちょっとだけ上をいくブログが構築できます。
実践編-2：さらにもう一歩踏み込んだメインビジュアル画像を…
SWELLのメインビジュアルをこの画像と変更してトップサイトに表示しました。
『カスタマイズ』『トップページ』『メインビジュアル』『スライド画像[1]（PC）』
で画像が変更できます。
適当に作ったのですが、『あれ、これでもいいかな？』って思うぐらい意外と良くないですか？
下の画像は、実は上の赤い画像と同じ形なんですよね。写真画像をこの形で切り抜いてアップしてみました。
これも、なかなかおしゃれじゃないでしょうか？
（画像は適当に選んだので、内容とは合っていませんが・・・・）
切り抜きしたい画像の上に短径で作った加工短形を配置
- 短形ツールで短形を配置
- 選択ツールで両方とも選択
- マウスの右クリックで
マウスの右クリックで『クリップを設定』
このように切り抜きます。
- 切り抜きたい画像は必ず下層。上層に短形を配置
- 下層、上層の入れ替えは、右上の『レイヤーとオブジェクト』で変更できます。
- 先程の『女性が新聞を読んでいる画像』は、最初に作成した赤の短形オブジェクトをこの画像の上に配置しマウス右クリックで『クリップを設定』です。
Inkscapeのダウンロード、インストール手順
Inkscapeは、メール等の登録もなくそのままダウンロード、インストールして使えます。
Inkscape導入方法は以下の手順
『ダウンロード』『Current Stable Version』をクリック
ビット数が「64bit」か「32bit」かを選択します。
ビット数はご自身のパソコン環境によって異なりますので、一度確認してから選択してください。
拡張子『exe』を選択しクリック。
ダウンロード完了しますとインストールが始まります。
インストールが始まらなければ、ダウンロードした中からexeファイルを見つけてダブルクリック。
後は、順次進めていけばインストールが完了します。
これで、インストールまで終了します。
正解はない。だからこそ、試行錯誤を楽しもう！
ひろおじお疲れ様でした。僕が実際に行ってみた「メインビジュアルの創意工夫」、いかがでしたでしょうか。
今日お話しした内容を、もう一度おさらいしましょう。
- 「ひと手間」の価値
- 既製品の設定に、あなたのアイデアを少し加えるだけで、ブログの品格は一気に高まります。
- 画像と言葉のハーモニー
- 綺麗な写真を置くだけでなく、読者の心に寄り添うメッセージを重ねることが、最高の「おもてなし」になります。
- SWELLを使い倒す喜び
- 便利な機能をどう組み合わせるか。その試行錯誤こそが、お城作りの醍醐味です。
メインビジュアルは、一度作ったら終わりという「完成品」ではありません。
むしろ、あなたの成長や季節の移ろいに合わせて、何度でも色を変え、言葉を整えていく。その「未完成な部分」にこそ、ブログの面白さが詰まっています。
不器用な僕たちは、スマートにこなすことはできないかもしれません。でも、泥臭く「あーでもない、こーでもない」と悩んで作り上げた玄関は、どこか温かく、訪れる人をホッとさせる力を持っています。
🌅 ひろおじの「お茶の間、最後の一息」
最後までお付き合いくださり、本当にありがとうございました…😄。
デザインに正解を求めすぎると、手が止まってしまいます。一番大切なのは、「主（あるじ）であるあなた」が、その画面を見てニヤリとできるかどうかです。
「よし、今日はいい玄関ができたぞ」
そう思える日もあれば、「なんだか今日はしっくりこないな」という日もある。それでいいんです。
主（あるじ）であるあなたが、楽しみながら創意工夫を続ける限り、あなたのお城はいつまでも輝き続けます。さあ、次はどんな工夫をして読者さんを驚かせましょうか？
あなただけの、彩り豊かなお城作りを心から応援しています！
🏁 まだお城を建てる前の方が人生の第2幕をスタートするには？
さて、「メインビジュアルをおしゃれに！」が理解できたところで、あなたには、それを形にする『お城（ブログ）の準備』はできていますか？
ひろおじ不器用な僕でも、手順通りに進めたら自分だけのお城が建ちましたよ！ 失敗のない「人生の第2幕」、ここから一緒にスタートしてみませんか？
📌 マニュアルは、コチラ！
🚀 【最短ルート】不器用さん専用！迷子にならないお城の建て方
【 重要 】
難しい専門用語は全部横に置いておきましょう。僕が隣で一緒に歩くから大丈夫。ルンルン気分で、自分だけの居場所を完成させてくださいね！
メインビジュアルをおしゃれに！創意工夫でやってみた【SWELL】でよくある Q＆A
また「メインビジュアルをおしゃれに！創意工夫でやってみた【SWELL】」が読み終わりましたら、次は、「次の記事」を確認してみましょう。
詳しい内容は下記の記事で紹介しているので、あわせて読んでみてくださいね！
