開催日程はありません。
開催日程はありません。
ご覧頂き、ありがとうございます。アトリヱ未來 廣瀬 誠です！ 名古屋市でプログラミング講師やウェブ制作を行っております。
この春で創業7年を迎えます。この間、プログラミング講師として、またウェブ制作を通じて多くの方々のお手伝いをさせていただきました。本当に感謝です。
「情報技術を夢の架け橋に」をテーマに、プログラミングを学びたい方に、基礎から親切丁寧に個人指導を行っております。
また、ウェブサイト制作サービスも人気です！高品質かつお手頃な価格で作成いたしております。個人事業主や中小企業の方々にとって、信頼できる名刺代わりにいかがで...
+続きを読む
多くの方々に見ていただけるウェブサイトとするためには、デザインも大切です。ウェブサイト制作の流れや、デザインについて基礎を学びます。そしてプログラミングを始めていくために必要なテキストエディターやブラウザと呼ばれるソフトの設定を行います。準備が完了したら、HTMLでのウェブサイト始めていきます。
ウェブデザインの基礎を学ぶ
ウェブデザインは、単に美しい見た目を作るだけではなく、ユーザー体験を考慮した構築が求められます。このセクションでは、デザインの基本原則（レイアウト、色彩、タイポグラフィなど）を学び、視覚的な要素がどのように情報を伝えるかを理解します。また、レスポンシブデザインの重要性についても触れ、様々なデバイスでの表示を最適化する方法を習得します。実際のプロジェクトを通じて、デザインのアイデアを具現化するスキルを育てます。
コーディング環境を整える
ウェブ制作には適切な開発環境が不可欠です。このセクションでは、プログラムを書くためのエディタ（Pulser）のをインストールし、設定方法、効率的なコーディングを実現するためのショートカットやプラグインの活用法を学びます。また、ブラウザの開発者ツールを使ったデバッグ技術や、ローカルサーバーの立ち上げ方についても解説し、実際のコーディング作業をスムーズに進めるための基盤を築きます。
HTMLによるマークアップを始める
HTMLはウェブの骨組みを作る重要な言語です。このセクションでは、HTMLの基本構造やタグの使い方、セマンティックなマークアップの重要性について学びます。具体的な課題を通じて、見出し、段落、リスト、リンク、画像などの要素を使った実践的なマークアップを行い、コンテンツをどのように整理し、表示するかを体験します。
HTMLでマークアップされたウェブサイトは、とてもシンプルな見た目です。ウェブサイトが誕生した30年前においては、文字と画像が表示されているだけで充分でしたが、今日のウェブサイトでは物足りなく感じます。第二回〜第六回にかけて、CSSによる装飾技術を学んでいきます。
CSSでレイアウトを始める
CSS（Cascading Style Sheets）は、ウェブページのスタイルを定義するための言語です。このセクションでは、基本的なCSSの構造を学び、スタイルシートを使ってウェブページの見た目を整える方法を習得します。具体的には、色、フォント、マージン、パディングなどのプロパティを使用して、要素の見た目をカスタマイズする方法を学びます。
モバイルファーストでレイアウトを始める
モバイルファーストのアプローチを導入し、最初にモバイルデバイス向けにデザインを行う重要性を学びます。メディアクエリを使用して異なるデバイスに対応したスタイルを適用し、ユーザーエクスペリエンスを最適化する技術を習得します。
CSSグリッドを使ってレイアウトを始める
CSSグリッドは、複雑なレイアウトを簡単に実現するための強力なツールです。このセクションでは、CSSグリッドの基本的な概念と構成を学び、グリッドレイアウトを利用して、効率的かつ柔軟なデザインを作成する方法を習得します。具体的には、グリッドコンテナとグリッドアイテムの設定、行や列のサイズの指定、グリッドエリアの定義などを実践的に学びます。また、レスポンシブデザインと組み合わせて、異なる画面サイズに対応したレイアウトを柔軟に調整する方法についても触れます。
フォント設定やヘッダー、ナビゲーションメニューの装飾について学びます。
フォント設定
フォントの選び方やウェブフォントの導入方法を学び、フォントサイズ、ウェイト、行間、文字間の設定を通じて、可読性の高いテキストデザインを実現します。
ヘッダーの装飾
ヘッダーの基本構造をHTMLで作成し、CSSを使って背景色などを設定します。
ナビゲーションメニューの装飾
リスト形式のナビゲーションメニューをHTMLで構築し、CSSでスタイルを設定します。ホバー効果やレスポンシブデザインに対応したメニューの調整方法も学び、使いやすいナビゲーションをデザインします。
ヒーローイメージ、キャッチコピー、ボタンのデザインについて学んでいきます。
ヒーローイメージ
ヒーローイメージは、ウェブページの最上部に配置される大きなビジュアルで、訪問者に強い印象を与える重要な要素です。ヒーローイメージの効果的な設計方法を学びます。
画像の選定: ブランドやメッセージに合った高品質な画像を選ぶことが重要です。画像は視覚的なストーリーテリングを強化し、ユーザーの注意を引きます。
レスポンシブデザイン: デバイスの画面サイズに応じて画像が適切に表示されるように、CSSのobject-fitプロパティを活用します。
オーバーレイ効果: 画像の上に色やテキストを重ねることで、視認性を高め、視覚的に魅力的なデザインを作成します。透明度を調整することで、画像が背景として機能しつつ、テキストが読みやすくなります。
キャッチコピー
キャッチコピーは、訪問者の興味を引くための短いフレーズであり、ブランドやサービスの核心を伝える役割を果たします。このセクションでは、効果的なキャッチコピーの作成方法を学びます。
簡潔さと明確さ: 短く、明確なメッセージを心掛け、訪問者が一目で理解できるようにします。
感情に訴える: 訪問者の感情に響く言葉を使い、共感を呼び起こすことで、関心を引きます。
フォントとスタイル: キャッチコピーのフォント、サイズ、色を工夫し、ヒーローイメージと調和させながら、視覚的に引き立てます。
リンクをボタンの形にする
リンクをボタンの形にすることで、ユーザーが行動を起こしやすくなります。このセクションでは、ボタンデザインの基本とスタイリング技術を学びます。
ボタンの構造: HTMLでリンクにボタンのクラスを追加し、視覚的な要素として機能させます。例えば、<a>タグを使用してボタンを作成します。
スタイル設定: CSSを使ってボタンの背景色、ボーダー、パディング、テキストの色を設定し、ホバー効果を追加します。これによって、ユーザーがマウスを合わせたときに視覚的なフィードバックを提供します。
引き続き、CSSによる装飾方法を学びます。
CSSグリッドレイアウトを用いて二列にレイアウトする方法や、擬似要素を用いた見出しの装飾、ウェブフォント（書体）の利用方法について学びます。
CSSグリッドレイアウトを用いて二列にレイアウトする
CSSグリッドレイアウトは、ウェブページのレイアウトを簡単に構築するための強力なツールです。このセクションでは、二列レイアウトの作成方法を学びます。
グリッドコンテナの設定: display: grid;を使用して、要素をグリッドとして配置します。grid-template-columnsプロパティを使用して、二列構造を定義します。例えば、grid-template-columns: 1fr 1fr;と設定すると、二つの列が同じ幅で作成されます。
アイテムの配置: グリッドアイテムを適切に配置するために、grid-columnやgrid-rowプロパティを使用して、特定の位置にアイテムを配置します。これにより、異なるコンテンツを柔軟に配置できます。
レスポンシブデザイン: メディアクエリを使用して、画面サイズに応じてレイアウトを変えることができます。例えば、小さいデバイスでは一列にすることで、ユーザー体験を向上させることができます。
擬似要素を用いた見出しの装飾
擬似要素（::before と ::after）を使用して、見出しに視覚的な要素を追加し、デザイン性を高める方法を学びます。
基本的な構造: 擬似要素を用いて、見出しの前後に☆印などを追加し、見出しを目立たせます。
装飾線の追加: 上下に線を引くことで、見出しを視覚的に区切ります。
アニメーション効果: ホバー時に擬似要素の色やサイズを変更することで、動的な印象を与えます。
ウェブフォントを活用する
ウェブフォントは、デザインに独自性を加えるための重要な要素です。
フォントの選定: Google Fontsなどのウェブフォントライブラリを利用して、デザインに適したフォントを選びます。特に、視覚的なインパクトを与えるフォントを選ぶことが重要です。
フォントの導入: HTMLの<link>タグを使用して、選んだフォントをウェブページに追加します。また、CSSでfont-familyプロパティを使用して、特定の要素にフォントを適用します。
フォントのスタイリング: フォントサイズ、ウェイト、スタイルを調整し、コンテンツが読みやすく、かつ魅力的になるようにします。特にタイトルやキャッチコピーに個性的なフォントを使用することで、視覚的なアクセントを加えます。
ここまでモバイルファースト（iPhone優先）でデザインを行って参りました。
iPadなど大きな画面サイズでも、快適にウェブサイトが閲覧できるようにしたいものです。このセクションでは、メディアクエリを用いたレスポンシブデザインの手法について学びます。
1. レスポンシブデザインとメディアクエリ
モバイルファーストデザインを実現した後、次のステップは大きな画面サイズ（iPadやデスクトップ）でも快適にウェブサイトを閲覧できるようにすることです。このセクションでは、メディアクエリを使用してレスポンシブデザインを実装する方法を学びます。
2. レスポンシブデザインの重要性
レスポンシブデザインは、異なるデバイスや画面サイズに応じて、ウェブサイトのレイアウトやスタイルを調整する手法です。これにより、ユーザーはどのデバイスを使用しても快適にコンテンツを閲覧できるようになります。特に、iPhoneでの体験を基に、iPadやデスクトップでも同様の快適さを提供することが重要です。
3. メディアクエリの基本
メディアクエリは、CSSのルールを画面の幅などに基づいて適用するための機能です。
画面の幅が広がった際に、グリッドレイアウトやフレックスボックスを使用して、要素の配置を変更します。例えば、モバイルでは一列表示だったものを、タブレットでは二列表示に変更することができます。
トップページが完成しましたので、今回と次回では下層ページの制作を行います。ページの増やし方や、フォントアイコンの使い方について学びます。
下層ページの制作
読みやすいテキストや高品質な画像、動画を提供し、ユーザーに価値のある情報を提供することが良質なウェブサイトとなる為には大切です。
ページの増やし方
効率的に下層ページを増やすためには、既存ページを雛形（テンプレート）として利用し、新しいコンテンツ（出し物）を挿入することで、一貫性のあるウェブサイトを制作することができます。大規模なサイトでは、静的サイトジェネレータ等を用いて開発しますが、ここではJavaScript(ジャバスクリプト)を用いて簡易的に実現します。
フォントアイコンの使い方
フォントアイコンは、視覚的な要素としてウェブデザインに便利なツールです。これにより、デザインの一貫性を保ちながら、軽量でスケーラブルなアイコンを使用できます。
1. フォントアイコンライブラリの選定
いくつかの人気のあるフォントアイコンライブラリがあります。ここでは豊富なアイコンを提供している Font Awesome の利用方法を学びます。
2. フォントアイコンの導入と利用法
Font Awesome は、CDN（Content Delivery Network）と呼ばれる、ウェブコンテンツを効率的に配信する仕組みを用いることで、簡単に使うことができます。時計のマークなど、使用したいアイコンを選び、HTMLに追加、CSSでスタイルを調整する方法を学びます。
最終回となる第八回では、表（テーブル）や地図、動画や、問い合わせフォームの作成を学び、ウェブサイトを公開します。
1. 表（テーブル）の作成
表（テーブル）は、データを整理して表示するための重要な要素です。HTMLを使用して基本的なテーブルを作成する方法を学びます。
2. Google MapやYouTube動画、SNSの埋め込み
ウェブサイトの閲覧者に、自社の地図や、PR動画を紹介したい場面もあることでしょう。
Google MapやYouTube動画、SNS等を埋め込む方法について学びます。
3. お問い合わせフォームの作成
お問い合わせフォームは、利用者がウェブサイトを通じて企業や個人と連絡を取るための重要なツールです。
名前、メールアドレス、メッセージ などの作成方法や、ウェブサイト管理者への通知方法などを学びます。
4. ウェブサイトの公開
一昔前までは、レンタルサーバーを契約して、ウェブサイトの公開を行っておりましたが、昨今では、ウェブサイトのホスティングサービスの利用が主流となって参りました。Netlify（ネットリファイ） のサービスを利用して、今まで作成したウェブサイトを公開する方法を学びます。
