プラグインを使う事でハンバーガーメニューを簡単に作る事が出来ます。
アイコンの切り替えはjQueryでclass「is-active」をトグルさせるだけで良いので自身で記述してしまいましょう。
<p class="hamburger " id="ham-btn"> <span class="hamburger-box"> <span class="hamburger-inner"></span> </span> </p>
サイト制作のワークフロー
webサイト制作におけるワークフローの一例
ヒアリング
クライアントとのヒアリングの時点で、方向性やサイトの目的、そしてサイトに盛り込むコンテンツなどを明確にします。また、その事をクライアントとしっかりと共有する事が大事です。その為にはしっかりとクライアントのいう事に耳を向け、クライアントの要望を言語化する必要があります。
ペルソナの設定
「ペルソナ（persona）」とは、サービス・商品の典型的なユーザー像のことで、マーケティングにおいて活用される概念です。
実際にその人物が実在しているかのように、年齢、性別、居住地、職業、役職、年収、趣味、特技、価値観、家族構成、生い立ち、休日の過ごし方、ライフスタイル……などリアリティのある詳細な情報を設定していきます。
ラフデザイン・ワイヤーフレームの作成
各ページの画面に盛り込む内容を検討し、まずは手書きのラフで良いので、全体のレイアウトなどを考え、次にIllustrator等のソフトを使って「ワイヤーフレーム」と呼ばれる線画に起こします。
ラフデザイン
カンプ制作
カンプとは「comprehensive layout」が省略されたもので、「comprehensive」には「包括的な」「総合的な」といった意味があります。カンプの段階でカラースキム（配色計画）・寸法をしっかりと考えながら図面に起こし、デザインやレイアウトも含めた全体像を作ることで完成品のイメージを把握出来るものを作成します。いわばwebサイトの設計図です。
https://blogs.adobe.com/japan/web-design-photoshop-cc-basics-artboard/blogs.adobe.com
スライス(アセット 書き出し)・コーディング
webサイトの設計図であるカンプを元に細かくパーツ別に分けて、コーディングをしてサイトを組み立てます。
動的プログラムの導入
プログラムを導入する意図を明確にし、ユーザビリティーの高いサイトを作るよう心がけましょう。
GoogleのBardを使ってサイトの要件定義を作成する
BardはGoogleが開発した大規模言語生成 AIです。大規模言語モデル（Large Language Models、LLM）とは、非常に巨大なデータセットとディープラーニング技術を用いて構築された言語モデルです。
どういった事が出来るか本人に聞いてみました。
私の名前はBardです。Google AIによって開発された大規模な言語モデルです。テキストとコードの膨大なデータセットでトレーニングされており、テキストの生成、言語の翻訳、さまざまな種類のクリエイティブ コンテンツの作成、有益な方法で質問に答えることができます。
私はまだ開発中ですが、さまざまな種類のタスクを実行することを学びました。
あなたの指示に従い、思慮深くあなたの要求を完了するために最善を尽くします。
質問がオープンエンド、挑戦的、または奇妙であっても、包括的かつ有益な方法で回答するために私の知識を使用します。
詩、コード、台本、音楽作品、電子メール、手紙など、さまざまなクリエイティブなテキスト形式を生成します。すべての要件を満たすために最善を尽くします。
私はまだ学び、成長しており、今後も新しいことを学び続けます。
Bardを使って決める事
- お店の名前
- お店のコンセプト
- タグライン
- リード文（100〜200文字程度）
- よくある質問とその答え（3つ）
- お知らせ（5日分）
オブジェクトの操作
オブジェクトとは、関連するデータや 機能の集合体です。JavaScriptには多くのオブジェクトが用意されています。これを目的別に使っていきます。
- documentオブジェクト（ファイル関連のデータを操作する）
- windowオブジェクト（ウィンドウ関連のデータを操作する）
- dateオブジェクト（日付や時間関連のデータを操作する）
- mathオブジェクト（演算処理などをする）
基本的なオブジェクト操作を覚える
window.document（ブラウザに文字を表示させる）
JavaScriptで文字列を表示するには、「window.document.write( )」を使います。
表示したい文字列をシングルコートではさみます。「window.」は省略できます。
document.write( 'Hellow World!!' );
window.alert（警告ダイアログに表示させる）
alert( 'Hellow World!!' );
window.confirm（確認ボックスを表示する）
confirm( '保存しますか？' );
window.prompt（ユーザーに文字を入力してもらう）
ユーザーに文字や数字を入力してもらい、それを「戻り値」として受け取ることが出来ます。
prompt( '金額を入力して下さい' );
入力した値を変数に代入する
<script> let name = prompt('名前を入力してください'); document.write(name); </script>
CSS × jQueryのハイブリッドアニメーション
最近のWebアニメーションはスマホで表示する事も考慮し、動きの軽いアニメーションが求められています。その為には単一のスクリプトではなく複数のスクリプトを合わせる必要があります。
jQueryのアニメーションはカクカクでちょっと重い
jQueryの特徴の1つであるアニメーション機能を使うと、手軽にアニメーションを実装することができてとても便利です。しかし、jQueryによるアニメーションを多用すると処理がどうしても重くなります。
特にスマホなどでは、元々アニメーションがネイティブアプリのUIに多く使われているため、jQueryによるアニメーションがもっさりとした動きになる事が多いです。
jQueryのアニメーションは、通常CPUにより処理されています。CPUはアニメーションだけでなくコンピュータ全体の演算を担っているため、CPUでアニメーション処理を行うとどうしても処理が遅くなってしまいます。
CSSのtransfromは早くて滑らか
CSSの「transformプロパティ」を使用したアニメーションはGPUが処理を行います。GPU「 Graphcs Prosessing Unit」は画像の処理が得意なので、描画をGPUで行う事でCPUの負担が軽減され、結果としてページ全体の表示も早くなります。
jQueryとCSSを上手く使うことで、滑らかで負荷のかからないアニメーションを制作しましょう。
CSSアニメーションのコツ。
— 池田 泰延 (@clockmaker) 2019年7月5日
transformとleftだと滑らかさに違いが出る。
上側: transformX
下側: left
leftはピクセル単位でしか動けないので、カクカクしてしまう。transformは小数点での表示に対応しているので、カクカクしない。 pic.twitter.com/bncJzIJIoy
JavaScriptとは
プログラムとは？
いよいよJavaScriptの授業が始まります。人によっては今回のJavaScriptがプログラムに触れる初めての機会になる場合もあります。
プログラムという物を触った事が無い人はまず、「プログラム」という物がどういう物なのか、という事を理解しましょう。
プログラム
コンピュータプログラム（英：computer programs）とは、コンピュータに対する命令（処理）を記述したものである。コンピュータが機能を実現するためには、CPUで実行するプログラムの命令が必要である。プログラミング言語と呼ばれるコンピューターのための言語。
要はコンピューターに命令し、動かす為に使う物（言語）です。
プログラム学習
2020年以降、プログラミング教育が小学校で必修化されます。現在IT業界が抱えている問題として、今後さらにIT化していく社会に対しWebエンジニアをはじめとするIT人材の不足があります。
しかし、小学校のプログラミング教育は「プログラマーの育成」が目的ではありません。小学校段階におけるプログラミング教育の目的は、プログラミング言語の使い方を覚えることで無く、文部科学省は、プログラミング教育を通じて育成すべき資質・能力を「プログラミング的思考」という言葉で表現しています。
この事は初学者にとってのこのクラスでのプログラム授業と同じで、まずは「プログラミング的思考」を理解する事を目標にしましょう。
ChatGPT
今巷で流行っている「ChatGPT」のような大規模言語モデルのAIも、指示の仕方次第で生成されるコンテンツにとても差が出てしまいます。AIに適切な指示を出せるかは、当の人間がどれだけ「プログラミング的思考」を理解しているかによります。
Javascriptとは
JavaScriptとは、米Netscape Communicationsによって開発されたスクリプト言語です。JavaScriptは主にWebブラウザ上で動作します。クリックすると画像が変わったり、要素が消えたり、現れたりというHTMLやCSSでは出来ない、いわゆるサイトの動的な部分を担当しているスクリプト言語です。
Webサイト・Webアプリ・バックエンド・デスクトップアプリ・モバイルアプリなど、ブラウザからサーバー、デスクトップからスマートフォンまで使用場面は多岐にわたっています。
それどころか、今やJavaScriptは宇宙船のUIにも使用されています。
note.com
JavaScriptと似た名前のプログラミング言語に「Java」というものがありますが、まったくの別物です。なので混同しないようにしましょう。
スクリプト言語
JavaScriptはスクリプト言語です。ではスクリプト言語とはどういうものか？
簡単に言うとスクリプト言語とは簡易版のプログラミング言語で、特に実行環境を整える必要も無く、ソースコードをその場で順を追って解釈する「インタープリタ方式」の言語です。
プログラム初学者にとっては特に難しい設定をしなくて済み、手軽に使えるのがこのJavaScriptです。
JavaScriptで出来る事
演算処理
プログラミングの基本である演算処理。単純な四則演算のほか、三角関数や円周率等を使用したり、年齢を算出したり、日数を割り出したりなど、さまざまな用途で使用します
ドキュメント操作
Webページに文字を表示したり、非表示にする。文字や背景の色を指定する。 Webページを切り替える、など、html内のドキュメントを操作する事が出来ます。
マウス等のイベント処理
クリックやマウスオーバー、Webページそのものロード時など、その他様々なタイミングで処理を行わせることができます。
サムネイル画像をクリックすると大きい画像が表示されるようなものから、メニュー項目をクリックすると下の階層のメニューが開くようなナビゲーションまで、このようなイベント処理を行っています。
DOMを使用した処理
DOM(Document Object Model)を使用することで、HTML文をツリー構造のように扱うことができます。
これを上記のイベント処理等と組み合わせて使用することで、サイト内に新しいコンテンツを挿入したり、書き換えたり、削除することが出来ます。
jQueryとは？
jQuery（ジェイクエリー）とは、2006年1月にリリースされた、ウェブブラウザー用のJavaScriptコードをより容易に記述できるようにするために設計された軽量なJavaScriptライブラリである。様々な場面で活用されており、JavaScriptライブラリのスタンダードと呼ぶ者もいる。
jQueryの特徴
ワイヤーフレームの作成
ワイヤーフレームとは「サイトの設計図」です。
サイトを作成する前に「何を・どこに・どのように」画面に配置するかを明らかにする事で、実際の作成作業をスムーズに進める事が出来ます。また複数人で作業する場合やクライアントとデザインイメージを共有する場合にも必要になってきます。
またワイヤーフレームはレイアウトの確認をする為のものなので、この時点ではデザイン情報（色やフォントの種類）は指定せずに枠のみを作っていきます。
各要素の高さ
アートボードの大きさ：1366x2700px
header:100px
nav:50px
content:600px(x4)
footer:280px
各要素の余白:10px
デザインルール
ワイヤーの段階で色を入れないのが通常です。この時点で色を入れてしまうと、ワイヤーフレーム本来の目的である「基本的な構造の確認」に余計な情報が入り、却って解り難くなってしまう恐れがあります。
Photoshopでのアートボード
アートボード機能は、Illustratorでは以前からあった機能ですが、PhotoshopではPhotoshop CC2015から実装されました。webデザインなど複数のページのデザインを作成しなくてはいけない時に、ページ間を簡単に移動できるので大変便利です。
参考資料
デザインカンプ
