inflearn logo
知識共有
inflearn logo

AIで作るホームページ型ネイバーブログ:スキン制作からリンク設定まで

高いホームページ制作費用をかけずに、ネイバーブログをホームページのように変えてみましょう。Google StitchとFigmaテンプレートを活用してホームページ型ブログスキンを自作し、透明ウィジェットでメニュー、相談、予約、ストアリンクを繋げる方法まで学びます。デザインやコーディングの知識がなくても、講義の順番通りに進めれば、ブログのトップ画面を専門的な紹介ページのように構成し、自分で修正・管理できるようになります。

1名 が受講中です。

難易度 入門

受講期間 無制限

Figma
Figma
AI
AI
Figma
Figma
AI
AI

受講後に得られること

  • Figmaテンプレートを活用してネイバーブログのスキンを自作する

  • Google Stitchで好みの雰囲気のブログスキン案を作成する

  • 透明ウィジェットでメニュー、ボタン、画像領域にリンクを連結

  • カカオトーク相談、予約、スマートストア、Instagramなど、お好みのページへ接続

  • 提供されるホームページ型ブログスキン3種の活用および直接修正

ネイバーブログをホームページのように変える方法、ホームページ型ブログ制作講座

ブログは運営しているけれど、
最初の画面が平凡で物足りなさを感じたことはありませんか?


業者に任せるには費用が負担になり、
自分で作るにはデザインも難しくコードも分からなくて
どこから手をつければいいか途方に暮れていたなら、
今回の講義でホームページ型ブログを直接作ってみてください。


この講座は、デザインやコードに詳しくない方でも
一歩ずつ進めながら、ネイバーブログをホームページのように整えられるよう構成された講座です。


フィグマ(Figma)のテンプレートを修正し、Google Stitchで好みの雰囲気のスキンイメージを作成し、透明ウィジェットを活用してメニューやボタンにリンクを繋げる方法まで学びます。


単にきれいに飾るだけで終わるのではなく、訪問者が相談、予約、購入、問い合わせページへ簡単に移動できるように、ブログのトップ画面を一つの案内ページのように作ることが目標です。


ホームページ型ブログとは?

ホームページ型ブログは、一般的なネイバーブログをホームページのように見えるよう整えたブログです。通常、ブログといえば記事が上から下へと積み重なっていく形を多く思い浮かべることでしょう。


ホームページ型ブログは、単に記事を集めただけのブログではなく、トップ画面にブランド紹介、メニュー、サービス案内、お問い合わせボタンといったホームページにあるような要素を配置することで、訪問者が必要な情報を簡単に見つけられるように作る方式のことです。


例えば、塾のブログであれば塾の紹介、授業案内、時間割、相談・問い合わせメニューを入れることができ、工房のブログであればクラス案内、作品写真、予約・問い合わせボタンを入れることができます。ショッピングモールや個人ブランドのブログであれば、スマートストア、Instagram、LINE相談、ポートフォリオページへと繋げることで、ブログを一つの紹介ページのように活用することができます。


なぜホームページ型ブログを作るのでしょうか?

ホームページを作るには、ドメイン費用、サーバー費用、制作費用など、さまざまな費用がかかることがあります。もちろん、目的に応じて別途ホームページがどうしても必要な場合もありますが、始めたばかりの段階では、費用や管理の負担が大きく感じられることがあります。


ホームページ型のブログは、既存のネイバーブログを活用するため、別途サーバーやドメインを準備しなくても、専門性のあるトップ画面を作ることができます。また、ブログ記事の発信と情報の案内を同時に行えるため、宣伝、問い合わせ、予約、申し込みへとつながるランディングページのように活用することができます。


この講義を受けると、このようなものを作ることができます

  • 通常のネイバーブログのトップ画面を、ホームページのように見えるスキンに変更することができます。

  • 上部メニュー、画像ボタン、相談ボタンのように、クリック可能な領域を直接作成することができます。

  • カカオトーク相談、ネイバー予約、スマートストア、Instagram、外部ページなど、希望するリンクへ訪問者を誘導できます。

  • 提供されているテンプレートを修正して、自分の業種や雰囲気に合ったブログスキンを作ることができます。

  • Google Stitchを活用して、お好みのスタイルのスキン画像を直接制作することができます。

  • イベント、シーズン、新しい授業や商品ができた時に、業者に依頼することなく直接修正することができます。


自分で作れると良い点

業者に任せれば最初の制作は楽かもしれませんが、後で文言を一つ変えたり、画像を一枚差し替えたい時も、その都度依頼しなければならないケースが多いです。しかし、自分で作れるようになれば、必要な瞬間にすぐ修正できます。イベント期間にはイベントバナーを入れ、季節に合わせてスキンの雰囲気を変え、新しい商品やレッスンができればメニューや画像を自分で入れ替えることができます。最初に一度だけ方法を身につけておけば、ブログをより長く、より柔軟に管理できるようになります。


このような方におすすめです

  • ネイバーブログを運営しているが、トップ画面をもっとプロフェッショナルに飾りたい方

  • 塾、工房、病院、スタジオ、ショッピングモール、個人ブランドのブログをホームページのように活用したい方

  • 業者に任せるには費用が負担になり、簡単な修正は自分で行いたい方

  • デザインやコードに詳しくなくても、一歩ずつ進めながら成果物を作りたい方

  • 相談、予約、購入、問い合わせにつながるリンクを、ブログのトップ画面に見やすく整理したい方

  • イベントやシーズンに合わせてブログスキンを自分で変えてみたい方


デザインやコードを知らなくても大丈夫です

この講義は専門のデザイナーや開発者のための講義ではありません。初めてホームページ型ブログを作る方も
順番通りについていけるよう、必要なプログラムのインストールから一歩ずつ進めていきます。Figmaが初めてでも大丈夫です。Google Stitchを初めて聞いたという方でも大丈夫です。透明ウィジェットやリンク設定に馴染みがなくても大丈夫です。


講義では必要な部分だけを分かりやすく説明し、
実際の作業手順に合わせて一つずつ進められるよう案内します。


講義は次のように進められます

まず、ホームページ型ブログとは何か、なぜ必要なのかについて分かりやすく学びます。次に、講義に必要なプログラムとフォントをインストールし、授業資料を読み込む方法を学びます。その後、提供されるテンプレートを直接修正しながら、ブログスキンを作る方法を身につけます。そして、透明ウィジェットを活用してメニューやボタンにリンクを繋げる方法を学びます。最後に、Google Stitchを活用して、自分が希望する雰囲気のブログスキン画像を制作する方法まで学んでいきます。


この講義の目標は単純です

プロのデザイナーのようにすべてを完璧に作り上げるのではなく、自分のブログに必要な画面を自ら作成し、必要な時に直接修正できるようになることが、この講義の目標です。


ブログを単に文章を投稿するだけの場所にするのではなく、自分のブランドを紹介し、訪問者を問い合わせ、予約、購入へと繋げられる空間に作り変えてみてください。


最初は難しく感じるかもしれませんが、講義の順番通りに進めていけば、基本テンプレートの修正から自分だけの雰囲気が詰まったブログスキンの作成まで、十分にやり遂げることができます。


これからはネイバーブログも、もう少し専門的で、もう少し見栄えが良く、もう少し活用度の高い空間に変えてみてください。ホームページ型ブログ制作講座で、最初から一歩ずつ一緒に作っていきましょう。


今すぐ始めてみてください

業者に依頼する前、高いホームページを作る前に、まずは自分のネイバーブログをホームページのように変えてみてください。講義を見ながら実際に進めていくうちに、自分のブログに合うスキンを作成し、必要なリンクを繋げ、これからも自分で管理できる方法を身につけることができます。今すぐホームページ型ブログの制作を始めてみてください。

講義を受講すれば、このようなブログを自分で作ることができます

基本テンプレート

透明ウィジェットに1つのリンクを設定する方法を学びます。

複数リンクテンプレート

透明ウィジェットに複数リンクを設定する方法を学びます。

講義で扱う内容

  • 実習中心に制作された講義で、完走時にはすぐに活用できる成果物を得ることができます。


セクション (1) ホームページ型ブログの理解

完成したホームページ型ブログを見ながら、ホームページ型ブログがどのように作られるのかを理解します。

セクション (2) 作ってみる

透明ウィジェットなどホームページ型ブログのための設定を行い、講義で提供されるテンプレートを利用してリンクを繋げる方法を理解します。

セクション (3) 自分だけのスキン作成

リファレンスを探し、AIデザインツールであるGoogle Stitchを利用してリファレンスのような草案を作成し、Figmaで詳細に修正します。

セクション (4) デザインリソース

無料の画像やフォントサイトを共有し、スキン制作をより多彩に行えるようにします。

講義購入時に提供される特典

🎁 すぐに使えるホームページ型ブログテンプレート3種

  • 編集可能なFigmaファイルを提供します。

  • テキストの修正、画像の入れ替え、色の変更だけで、すぐにブログスキンを完成させることができます。


こんな方に
おすすめです

学習対象は
誰でしょう?

  • ネイバーブログをホームページのように専門的にカスタマイズしたい方

  • 業者への制作費用をかけずに、ブログのトップ画面を自分で変えたい方

  • 塾、工房、病院、スタジオ、ショッピングモール、個人ブランドのブログを運営されている方

  • 相談、予約、購入、Instagramなどにつながるメニュー型ブログを作りたい方

  • デザインやコーディングの知識がなくても実践できるブログ制作講座をお探しの方

  • イベント、シーズン、商品の変更に合わせて、ブログのスキンを自分で修正したい方

  • AIデザインツールとFigmaテンプレートを活用して、素早く成果物を作りたい方

前提知識、
必要でしょうか?

  • デザインの経験やコーディングの知識がなくても受講できます。

  • Figmaを初めて使う方でも、講義で必要な部分だけを真似できるように案内します。

  • ネイバーブログを運営中、または新しく作成する予定であれば十分です。

  • コピー、貼り付け、ファイルを開くといった基本的なPC操作さえできれば大丈夫です。

こんにちは
sahwangです。

514

受講生

25

受講レビュー

4

回答

4.8

講座評価

2

講座

ノーコードBubble.ioで、誰でもアイデアをウェブサービスとして形にできるよう、簡単に実践できるガイドを提供します。

Brunchへ移動

カリキュラム

全体

11件 ∙ (1時間 2分)

講座資料(こうぎしりょう):

授業資料
講座掲載日: 
最終更新日: 

受講レビュー

まだ十分な評価を受けていない講座です。
みんなの役に立つ受講レビューを書いてください!

似ている講座

同じ分野の他の講座を見てみましょう!

期間限定セール

¥38,500

30%

¥7,144