要件定義の情報

制作物：JavaScriptを使った動的ページサイト
テーマ：架空のドーナツショップ
参考サイト：https://racines-b-s.com/

店舗名：Felica Bread&Salad
メインコピー：自然の恵みを味わう、おいしいご褒美
リード文：厳選されたオーガニック素材で作るフレッシュなサラダと、職人の手仕事で焼き上げたドーナツ。口にした瞬間、自然の甘みが広がります。毎日の暮らしに、ちょっとした幸せを。

お知らせ6件：
【期間限定】春の新作ドーナツ「桜もちリング」販売開始！
【毎月10日はドーナツの日】お好きなドーナツ1個プレゼント！
【新サービス】オンライン注文＆デリバリー開始！
【店舗情報】新宿店、6月1日グランドオープン！
【材料へのこだわり】北海道産オーガニック小麦を使用した新ドーナツ登場！
【SNSキャンペーン】インスタグラムで「#Felicaドーナツ」をつけて投稿しよう！抽選で10名様にドーナツ詰め合わせプレゼント！

店舗情報
住所：東京都豊島区南池袋x-x-x
電話番号：03-3333-xxxx
メールアドレス：example@gmail.com
営業時間：10:00~20:00
定休日：年末年始
駐車場：有り

サイト制作のワークフロー

webサイト制作におけるワークフローの一例

ヒアリング

クライアントとのヒアリングの時点で、方向性やサイトの目的、そしてサイトに盛り込むコンテンツなどを明確にします。また、その事をクライアントとしっかりと共有する事が大事です。その為にはしっかりとクライアントのいう事に耳を向け、クライアントの要望を言語化する必要があります。

サイト設計

ヒアリングであがったコンテンツの洗いだしを行い、これらをグルーピングしフローチャート（サイトマップ・ディレクションマップ）と呼ばれるページの遷移の画面に視覚化し、まとめます。

サイトマップ

ディレクトリマップ

https://chot.design/web-director/e2277491ddc2/chot.design

ペルソナの設定

「ペルソナ（persona）」とは、サービス・商品の典型的なユーザー像のことで、マーケティングにおいて活用される概念です。
実際にその人物が実在しているかのように、年齢、性別、居住地、職業、役職、年収、趣味、特技、価値観、家族構成、生い立ち、休日の過ごし方、ライフスタイル……などリアリティのある詳細な情報を設定していきます。

ferret-plus.com

ラフデザイン・ワイヤーフレームの作成

各ページの画面に盛り込む内容を検討し、まずは手書きのラフで良いので、全体のレイアウトなどを考え、次にIllustrator等のソフトを使って「ワイヤーフレーム」と呼ばれる線画に起こします。

ラフデザイン

ワイヤーフレーム

カンプ制作

カンプとは「comprehensive layout」が省略されたもので、「comprehensive」には「包括的な」「総合的な」といった意味があります。カンプの段階でカラースキム（配色計画）・寸法をしっかりと考えながら図面に起こし、デザインやレイアウトも含めた全体像を作ることで完成品のイメージを把握出来るものを作成します。いわばwebサイトの設計図です。

https://blogs.adobe.com/japan/web-design-photoshop-cc-basics-artboard/blogs.adobe.com

スライス(アセット 書き出し)・コーディング

webサイトの設計図であるカンプを元に細かくパーツ別に分けて、コーディングをしてサイトを組み立てます。

動的プログラムの導入、APIの導入

プログラムを導入する意図を明確にし、ユーザビリティーの高いサイトを作るよう心がけましょう。

APIとは

APIとは「アプリケーション・プログラミング・インターフェース（Application Programming Interface）」の略称です。一言で表すと、ソフトウェアやプログラム、Webサービスの間をつなぐインターフェースのことを指します。

検証

仮サーバーにアップして、リンクやユーザービリティなどを検証します。

プロトタイピングツール

最近はwebサイトを作成する際に、クリックしたらどうなるか、スクロールしたらどうなるか、というUI/UX部分を事前に共有するために、プロトタイプを作成する事が重要視されています。そういったプロトタイプを作成するツールが使用出来る事も求められています。
プロトタイプツールには色々なものがありますが、現状figmaが広く使われているので、まずはfigmaの使い方を覚えましょう。

www.figma.com

https://chot.design/figma-beginner/chot.design

book.mynavi.jp

実際の制作会社のワークフローを把握してみましょう。

baigie.me

baigie.me

columns を使ってPinterest風のカラムレイアウトの作成

columns を使ってピンタレスト風のカラムレイアウトの作成
このカラムレイアウトの一番のメリットは画像をすべて同じ大きさにトリミングする必要が無いことです。

www.pinterest.jp

See the Pen
css column layout by yachin29 (@yachin29)
on CodePen.

break-inside: avoid;

ボックス途中でのカラムの区切り方法を指定する。avoidにすることでボックス途中での改ページ/カラム区切りを避ける事が出来ます。

.box{
break-inside: avoid;
}

高機能モーダルウィンドウ「Fancybox」のCDNを使ってギャラリーページを作ってみる

fancybox CSS

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.css" />

fancybox JS

<script src="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.js"></script>

https://web.archive.org/web/20210325170940/https://fancyapps.com/fancybox/3/docs/

ドローイングアニメーションの作成

See the Pen
q-chan by yachin29 (@yachin29)
on CodePen.

tympanus.net

gardenstudio.com.br

jakearchibald.com

SVGとは？

SVG【 Scalable Vector Graphics 】とは、XMLベースの2Dベクター画像記述言語。2001年9月にW3C勧告として公開された。
ベクター画像は画像をビットマップ形式ではなく、線や面などの図形の集合体として扱うため、見る環境に応じて最適な表示が可能となる。
SVGではアニメーション機能などもサポートしており、Flashで行えるような簡単なインタラクティブコンテンツの作成が可能となっている。
SVGファイルはAdobe社のIllustratorに代表される画像編集アプリケーションで扱うことができるほか、HTMLとの連携を意識して、Webブラウザでも対応が進められている。
ちなみに、SVGはXMLベースで策定された言語のため、テキスト形式のファイルで画像を表現するという珍しい形態を取っている。

SVGに対応しているブラウザー

• Internet Explorer 9以上
• Firefox 3.0以上
• Chrome 4.0以上
• Mac OS X Safari 3.2以上
• Opera 9.0以上
• iOS Safari 3.2以上
• Androidブラウザ 3.0以上

blog.codecamp.jp

svgで使用するタグの分類

svgで使用するタグは大きく分けると３種類に分ける事が出来ます。

• 基本図形(rect, circle, ellipse, line, polyline, polygon)
• パス(path)
• テキスト(text)

今回の授業ではSVGを単独で使用するだけでなく、HTMLファイルの中に記述し、css3アニメーションを併用します。
こうする事でブラウザー上で色々な表現方法が可能になります。
※ただしIEとOperaは、全てのSVG要素でCSSアニメーションを受け入れないという問題があります。

変化させる方法は主に以下の3つがあります。

CSSプロパティ（transitionやanimation）を使う→簡単だけどIE未対応
setTimeout()を使う→IEも動くけど面倒
JavaScriptライブラリを使う→簡単&IEでも動くけどサイズが膨大
それぞれ、長所・短所があるので、状況に応じて使い分けると良いかと思います（ちなみにjQueryはSVGの要素を扱えないので使えません）。

SVGのパスは、以下のようなプロパティを使って、スタイルを指定出来ます。

stroke：線の色
stroke-width：線の太さ
fill：塗りつぶしの色
stroke-dasharray：破線の間隔
stroke-dashoffset：破線の開始位置

今回は破線のプロパティである、stroke-dasharrayとstroke-dashoffsetを使い、線を引くアニメーションを作成します。

また、今回新たに出てきた「animation-fill-mode」プロパティもしっかり覚えましょう。

none（初期値）

キーフレームで指定されたスタイルは、アニメーションの前後には適用されません。

forwards

アニメーションの実行後にキーフレームの最後の指定が適用されます。

backwards

アニメーションの実行後、即座にキーフレームの最初のスタイル指定を適用します。

both

forwards と backwards の両方が適用されます。アニメーション実行前には backwards が、実行後には forwards があると考えると分かりやすいと思います。

参考サイト

https://qiita.com/a-ide/items/107c9044d0f4e0354112qiita.com

animation-timing-functionについて

shu-naka-blog.com

要素が画面に表示されたらカーテンが開くアニメーション

cgworks.jp

munihoikuen.net

要素が画面に表示されたらその要素にクラス名をaddするというアニメーションです。
ここで重要なのはどうしたら要素が画面に表示するタイミングを取得出来るかです。要素が画面に表示するタイミングを取得には以下の4つの値が必要です。

1. 自分のスクロール量
2. :画面トップから対象要素のトップまで位置
3. :画面の高さ
4. :対象要素の高さ

まず、1と2を使って自身のスクロール量と対象要素の位置が同じになったタイミング（要素が画面の上端に到達したら）でaddClassします。
この時の計算式は1 = 2になります

さらに3の値を使って、addClassするタイミングを1画面分下にします。
1 = 2-3

最後に4の値を使って今度は逆に要素の高さ分addClassするタイミングを上にします。
1 = 2-3+4

さらに上記の式を応用して、要素が画面の中央に来たらaddClassというのも可能です。
その場合には対象要素の半分の高さと画面の半分の高さが必要になります。

1 = 2 - 3/2(1画面分の半分の値) + 4/2(対象要素の高さの半分の値)

jquery

$(function(){
$(window).on('scroll resize',function(){
let h =$('p').outerHeight();//対象要素の高さ

$('p').each(function(){
var elmTop=$(this).offset().top + 200;//画面topから対象要素のtopまでの距離
var winHeight=$(window).height();//1画面分の高さ
var scrTop=$(window).scrollTop();//自分がスクロールした量


//自分のスクロール量>対象要素の位置-1画面分+要素の高さ
if(scrTop > elmTop - winHeight + h){
$(this).addClass('curtain');
}else{
$(this).removeClass('curtain');
}

});
});
});

www.mgtnsn.com