コードなしでFigmaのデザインそのまま!Bubble.ioでウェブサイト作成
gisero
開発?デザイン?知らなくても大丈夫!講義で一つ一つ丁寧に教えるので、ついてくるだけで開発と関係のない方でも人生初のウェブサイトを完成させられます!
入門
bubble.io, Figma, No-code
高額なホームページ制作なしで、Naverブログをホームページのように変えてみましょう。Google StitchとFigmaテンプレートを活用してホームページ型ブログスキンを自分で作り、透明ウィジェットでメニュー、相談、予約、ストアへのリンクをつなぐ方法まで学べます。デザインやコーディングの知識がなくても、講座の順番どおりに進めれば、ブログのトップ画面を専門的な紹介ページのように構成し、自分で編集・管理できるようになります。


Figmaテンプレートを活用してNaverブログのスキンを自作する
Google Stitchで好みの雰囲気のブログスキン案を作る
透明ウィジェットでメニュー、ボタン、画像エリアにリンクを設定
カカオトーク相談、予約、スマートストア、Instagramなど、ご希望のページへ接続
提供されるホームページ型ブログスキン3種の活用および直接修正
ブログは運営しているものの、
最初の画面が普通で残念に感じたことはありませんか?
業者に依頼するには費用が負担で、
自分で作ろうとしてもデザインが難しく、コードも分からず
どこから始めればよいのか途方に暮れていたなら
この講義でホームページ型ブログを自分で作ってみましょう。
この講義は、デザインやコードに詳しくない方でも
一つひとつ手順に沿って進めながら、Naverブログをホームページのように装飾できるよう構成された講義です。
Figmaテンプレートを修正し、Google Stitchで好みの雰囲気のスキン画像を作成し、透明ウィジェットを活用してメニューやボタンにリンクを設定する方法まで学びます。
単にきれいに飾るだけでなく、訪問者が相談・予約・購入・お問い合わせのページへ簡単に移動できるよう、ブログのトップ画面をひとつの案内ページのように作ることが目標です。
ホームページ型ブログとは、一般的なNaverブログをホームページのように見えるようにデザインしたブログです。通常、ブログと聞くと、記事が上から下へと積み重なっていく形式を思い浮かべる方が多いと思います。
ホームページ型ブログは、単に記事だけを集めたブログではなく、最初の画面にブランド紹介やメニュー、サービス案内、問い合わせボタンなど、ホームページにありそうな要素を配置し、訪問者が必要な情報を簡単に見つけられるようにする形式です。
たとえば塾のブログなら、塾の紹介、授業案内、時間割、相談・問い合わせメニューを入れることができ、工房のブログなら、クラス案内、作品写真、予約・問い合わせボタンを設置できます。ショッピングモールや個人ブランドのブログなら、スマートストア、Instagram、カカオトーク相談、ポートフォリオページに誘導し、ブログを1つの紹介ページのように活用できます。
ホームページを作成するには、ドメイン費用、サーバー費用、制作費用など、さまざまな費用がかかる場合があります。もちろん、目的によっては専用のホームページが必要なケースもありますが、始めたばかりの段階では、費用や管理の負担が大きく感じられることがあります。
ホームページ型ブログは既存のNaverブログを活用するため、別途サーバーやドメインを用意しなくても、専門性のあるトップページを作成できます。また、ブログ記事の投稿と情報案内を同時に行えるため、宣伝、問い合わせ、予約、申し込みへとつながる案内ページのように活用できます。
一般的なNAVERブログのトップ画面を、ホームページのように見えるスキンに変更できます。
上部メニュー、画像ボタン、相談ボタンのようにクリック可能な領域を自分で作成できます。
カカオトーク相談、NAVER予約、スマートストア、Instagram、外部ページなど、任意のリンクに訪問者を誘導できます。
提供されているテンプレートを修正して、自分の業種や雰囲気に合ったブログスキンを作成できます。
Google スティッチを活用して、好みのスタイルのスキン画像を自分で作成してみることができます。
イベントやシーズン、新しいレッスンや商品が登場したときに、業者に依頼せず自分で修正できます。
業者に任せれば最初の制作は楽かもしれませんが、後から文言を一つ変更したり画像を一つ差し替えたりしたいときにも、その都度依頼しなければならない場合が多くあります。しかし、自分で作れるようになれば、必要なときにすぐ修正できます。イベント期間にはイベントバナーを設置し、季節に合わせてスキンの雰囲気を変え、新しい商品やレッスンができたらメニューや画像を自分で差し替えられます。最初に一度だけ方法を覚えておけば、ブログをより長く、より柔軟に管理できます。
Naverブログを運営しているものの、トップ画面をよりプロフェッショナルに整えたい方
塾、工房、病院、スタジオ、ショッピングモール、個人ブランドのブログをホームページのように活用したい方
業者に依頼するには費用が負担で、簡単な修正は自分で行いたい方
デザインやコードに詳しくなくても、順を追って進めながら成果物を作りたい方
相談、予約、購入、問い合わせにつながるリンクをブログのトップ画面に見やすく整理したい方
イベントやシーズンに合わせて、ブログスキンを自分で変更してみたい方
この講義は、プロのデザイナーや開発者向けの講義ではありません。初めてホームページ型ブログを作る方でも
順番に進められるよう、必要なプログラムのインストールから一つずつ丁寧に進めます。Figmaが初めてでも大丈夫です。Google Stitchを初めて聞いた方でも大丈夫です。透明ウィジェットやリンク設定に慣れていなくても大丈夫です。
講義では必要な部分だけをわかりやすく説明し、
実際の作業手順に沿って一つずつ進められるようご案内します。
まずは、ホームページ型ブログとは何か、なぜ必要なのかをわかりやすく学びます。次に、講義に必要なプログラムとフォントをインストールし、授業資料を読み込む方法を学びます。その後、提供されるテンプレートを自分で編集しながら、ブログスキンの作り方を身につけます。そして、透明ウィジェットを活用して、メニューやボタンにリンクを設定する方法を学びます。最後に、Google Stitchを活用して、自分の好みの雰囲気のブログスキン画像を制作する方法まで学びます。
プロのデザイナーのようにすべてを完璧に仕上げるのではなく、自分のブログに必要な画面を自分で作り、必要なときに自分で修正できるようになることです。
ブログを単に記事を投稿するだけの場所にするのではなく、自分のブランドを紹介し、訪問者を問い合わせ、予約、購入へと導くことができる空間にしてみましょう。
最初は難しく感じるかもしれませんが、講座の順番に沿って進めていけば、基本テンプレートの修正から、自分らしい雰囲気を取り入れたブログスキンの作成まで、十分に取り組むことができます。
これからは、Naverブログもより専門的で、より見やすく、より活用しやすい空間に変えてみましょう。ホームページ型ブログ制作講座で、最初から一つひとつ丁寧に、一緒に作っていきます。
業者に依頼する前に、高額なホームページを作る前に、まずは自分のNaverブログをホームページのように変えてみましょう。講義を見ながら実際に手を動かしていくうちに、自分のブログに合ったスキンを作り、必要なリンクをつなぎ、これからも自分で管理していく方法を身につけられます。今すぐホームページ型ブログの制作を始めてみましょう。
透明ウィジェットに1つのリンクを設定する方法を学びます。
透明ウィジェットに複数のリンクを設定する方法を学びます。
実習を中心に構成された講座で、受講を完了するとすぐに使える成果物を手に入れられます。
セクション (1) ホームページ型ブログを理解する
完成したホームページ型ブログを見ながら、ホームページ型ブログをどのように作るのかを理解します。
セクション(2)実際に作ってみる
透明ウィジェットなど、ホームページ型ブログのための設定を行い、講義で提供されるテンプレートを使ってリンクを接続する方法を理解します。
セクション(3)自分だけのスキンを制作する
リファレンスを探し、AIデザインツールであるGoogle Stitchを使ってリファレンスのような草案を作成し、Figmaで細部を修正します。
セクション(4)デザインリソース
無料画像やフォントサイトを共有し、スキン制作時により多彩なデザインを作成できるようにします。
編集可能なFigmaファイルを提供します。
テキストの修正、画像の差し替え、色の変更だけで、すぐにブログスキンを完成させることができます。
学習対象は
誰でしょう?
NAVERブログをホームページのようにプロフェッショナルに整えたい方
業者への制作費なしで、ブログのトップ画面を自分で変更したい方
塾、工房、病院、スタジオ、ショッピングモール、個人ブランドのブログを運営している方
相談、予約、購入、Instagramなどにつながるメニュー型ブログを作りたい方
デザインやコーディングの知識がなくても、手順に沿って進められるブログ制作講座を探している方
イベント、シーズン、商品変更に合わせてブログスキンを自分で修正したい方
AIデザインツールとFigmaテンプレートを活用して、素早く成果物を作りたい方
前提知識、
必要でしょうか?
デザイン経験やコーディングの知識がなくても受講できます。
Figmaを初めて使う方でも、講義で必要な部分だけを進められるように案内します。
Naverブログを運営中、または新しく作成する予定であれば十分です。
コピー、貼り付け、ファイルを開く程度の基本的なPC操作ができれば大丈夫です。
全体
11件 ∙ (1時間 2分)
講座資料:
4. 透明なウィジェットを作成する
04:31
5. クリック領域のガイドライン作成
04:48
6. 提供スキンを修正する
10:57
7. 基本スキンの適用およびリンク設定
09:35
9. リファレンスの探し方
03:00
11. デザインを修正し、最終適用する
09:19
知識共有者の他の講座はこちら
同じ分野の他の講座を見てみましょう!