開催日程はありません。
はじめまして！「作りたい！」を「作れた！」に変える、コンテンツデザイナーの深谷（ふっさん）です。
「デザインは学んだけど、Webサイトとして公開する方法がわからない…」
そんなお悩みを持つ方のために、コーディング不要のツール「Studio」を使い、あなたのデザインを”自力で”Webサイトとして公開するまでをマンツーマンで徹底サポートします。
実は私も、元々はITとは無縁の製造業出身。42歳で大きな病気をしたことを機に、「もっと面白く、誰かの役に立ちたい！」と一念発起し、この世界に飛び込みました。
IT未経験で勉強が苦手だった私だ...
+続きを読む
ゴール設定
ノーコードツール「Studio」を使い、Webサイトを自力で企画から公開までできるようになることが最終ゴールであると提示します 。
Studioの概要説明
Studioがコード不要でデザインの自由度が高いツールであることを解説します 。デザイナーが使うことで、アイデアを即座に形にできるメリットを伝えます 。
アカウント作成
参加者自身でStudioのアカウントを作成し、ダッシュボードにログインするまでをサポートします 。
エディタ画面の解説
「空白からはじめる」でプロジェクトを開始し 、制作画面の主要なパネル（要素パネル、キャンバス、設定パネル）の役割を説明します 。
実践①：テキストの編集
実際にテキスト要素をキャンバスに追加し、文字を打ち替え、設定パネルから色やサイズを変更する操作を体験します 。
実践②：画像の挿入
「追加」パネルから画像素材サイト「Unsplash」を選び、好きな画像をページに配置します 。
実践③：プレビュー機能
編集した内容が実際のWebページとしてどう見えるか、「ライブプレビュー」機能を使って確認します 。
Webの骨組み(1)：セクション
Webページが情報の塊である「セクション」で構成されていることを学びます。ヘッダーやコンテンツ部分などがセクションにあたります 。
Webの骨組み(2)：カラム(列)
セクション内の情報を縦に分割する「カラム」について学び、情報を横並びに配置する方法を理解します 。
実践①：レイアウト体験
新しいセクションにBOX（カラムとして利用）を2つ追加し、それぞれに背景色を設定して横並びに変更することで、構造を視覚的に理解します 。
主要パーツの操作
Webページを構成する3つの主要要素「テキスト」「画像」「ボタン」の役割と設定方法について解説します 。
実践②：主要パーツの配置
2カラムのセクションに、テキスト、画像、ボタンをそれぞれ配置し、設定パネルで見た目を自由に調整する練習をします 。
空間のデザイン：余白
要素の外側の余白「マージン」と、内側の余白「パディング」の重要性を学び、デザインを調整するスキルを身につけます 。
レスポンシブデザイン入門
PCやスマホなど異なる画面サイズでレイアウトを最適化する「レスポンシブデザイン」の基本と、Studioでの調整方法を学びます 。
実践③：レスポンシブ調整
PCでは横並びだった要素を、モバイル表示では縦並びに変更するなど、実際の表示を確認しながら調整に挑戦します 。
HPの「顔」となるファーストビューと主要セクションを作成し、ウェブサイトの骨格を組み立てる回です 。
学習テーマ：BOXモデルの理解
Studioのデザインの基礎となる、BOXを入れ子にしてレイアウトを組む「親子関係」の構造を学びます 。
実践①：ヘッダーセクションの作成
サイトロゴやナビゲーションメニューとなるテキストを配置し、ヘッダーを作成します 。
実践②：TOPセクション（ファーストビュー）の作成
サイトの第一印象を決めるメインの画像と、キャッチコピーとなるテキストを配置します 。
背景画像の設定方法や、画像の上にテキストを載せるためのBOX配置を実践します 。
応用課題：カラムレイアウトの自習
複雑なカラム構造を自力で再現する課題に取り組み、レイアウトスキルを向上させます 。
下層ページの作成とお問い合わせフォームを設置し、HPをより本格的で多機能なものにする回です 。
学習テーマ：レイヤーツリーの活用
要素が複雑に重なった場合に、目的の要素を正確に選択するための「レイヤー」パネルの操作をマスターします 。
実践①：下層ページの作成とページ間リンク
「お問い合わせ」など、トップページ以外のページ（下層ページ）を新規作成します 。
ヘッダーのメニューから、作成した下層ページへ移動できるようにリンクを設定します 。
実践②：お問い合わせフォームの設置
追加したページに、ユーザーが連絡を送るためのフォームを設置します 。
フォームが送信された際の通知先メールアドレスやメッセージタイトルを設定します 。
実践③：コンテンツセクションの完成
前回作成したTOPページに続き、各コンテンツセクション（サービス紹介、商品一覧など）をデザインの指示に沿って完成させます 。
サイトに「動き」を加え、あらゆるデバイスで美しく表示されるようにレスポンシブ対応を完成させる回です 。
学習テーマ①：ホバーエフェクト
マウスカーソルを要素に乗せたときに色やサイズが変化する「ホバーエフェクト」を学びます 。
ヘッダーメニューのテキストに、マウスを乗せると文字が大きくなる効果を実践します 。
学習テーマ②：スクロールアニメーション
ページをスクロールした時に、画像やテキストが「ふわっ」と現れるような動きをつける方法を学びます 。
コンテンツのテキストが、下から浮き出るように表示されるアニメーションを設定します 。
学習テーマ③：各種設定の応用
特定の画面サイズ（ブレイクポイント）ごとに、要素を表示させたり非表示にしたりする設定を学びます 。
実践：レスポンシブデザインの完成
PC表示では横並びだった要素を、スマートフォン表示では縦並びにするなど、レイアウトを最適化します 。
不要な要素を非表示にし、モバイルでの見やすさを徹底的に追求します 。
サイト管理の効率化、SEO対策を行い、完成したHPをインターネット上に公開する最終回です 。
学習テーマ①：サイト管理の効率化
ヘッダーなど、複数ページで使い回すパーツを「コンポーネント化」し、一箇所の編集が全てのページに反映されるようにします 。
ページ内リンク（アンカーリンク）を設定し、ヘッダーから各セクションへスムーズに移動できるようにします 。
学習テーマ②：検索エンジン・SNSへの対応
検索エンジンにページの内容を正しく伝えるための「hタグ（見出し）」や「altタグ（代替テキスト）」の重要性を学び、設定します 。
SNSでシェアされた時に表示されるサイトのタイトル、説明文、カバー画像（OGP設定）を行います 。
外部のSNSアカウントへのリンクを設定します 。
最終ステップ：公開
誤字脱字、リンク切れ、著作権の問題など、公開前の最終チェックリストを確認します 。
全ての準備が整ったら、「公開」ボタンを押し、自身のHPを世界に発信します 。
