WEBサイト制作の勉強

WEBサイト制作の勉強の為の解説ブログです。

フェリカテクニカルアカデミー

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

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

ヒアリング

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

サイト設計

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

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

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

ラフデザイン

カンプ制作

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


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


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

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


動的プログラムの導入

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

検証

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



baigie.me

複数ページ構成のサイト制作

最近ではシングルページのサイトもよく見かけますが、ほとんどのサイトは複数ページをリンクさせていくという形でこちらの方が一般的です。
複数ページでサイトを作る際に気をつけないといけないのがフォルダー構成です。

URLの正規化

例えば、キリンのwebサイトへは、
https://www.kirin.co.jp/index.html

でも

https://www.kirin.co.jp/

でも、飛べますが、こういったように表記に違いがあると複数のURLが別々にインデックスされたり、それぞれが別々の被リンクを設置されてしまったりするので、そういうケースを避ける為URLは必ず「/」で終わるように統一させましょう。



developers.google.com





上記の事を踏まえて、以下のようにページ毎にフォルダーを作り、中のファイルは必ずindex.htmlという名前にしましょう。



https://developers.google.com/search/docs/beginner/seo-starter-guide?visit_id=637429075069265959-3050504082&rd=1




nipponcolors.com



今回は5ページ構成のサイトを作ってみましょう。



使用するテキスト一例
ーーーーーーーーーーーーーーーーーーーーーーーーー

日本の四季

トップ
日本の春
日本の夏
日本の秋
日本の冬


四季の移り変わり
日本の気候は温暖でおだやかで、しかも春夏秋冬という四季にめぐまれています。
春には三寒四温、三日間寒さが続くと四日間暖かい日が続き、
そうしているうちに桜が咲き、夏が来る、そして秋になり、また冬を迎える。
このように、日本の気候は少しづつ微妙に季節の顔を変えながら、こまやかに移り変わっていくのです。
春夏秋冬という四季に彩られた日本は、その恩恵ともいうべき、ゆたかな自然にもめぐまれ、その季節に応じたさまざまな文化を育んできたのです。



日本の春
「サクラ」の名称の由来は、一説に「咲く」に複数を意味する「ら」を加えたものとされ、元来は花の密生する植物全体を指したと言われている。また他説として、春に里にやってくる稲(サ)の神が憑依する座(クラ)だからサクラであるとも考えられている。
富士の頂から、花の種をまいて花を咲かせたとされる、「コノハナノサクヤビメ(木花之開耶姫)」の「さくや」をとって「桜」になった、とも言われている。



日本の夏
夏は、四季のひとつで、春と秋にはさまれた季節。天文学的には夏至から秋分まで。太陽暦では6月から8月を指し、陰暦では4月から6月となる。 四季の区分のある土地では最も気温の高い、3ヶ月程度の期間である。北半球ではグレゴリオ暦の6月 - 8月ごろ、南半球では12月 - 2月ごろである。
日本で炎天下に咲く花としてはヒマワリやサルスベリが有名。夏の風物詩としてはアサガオも代表格。


日本の秋
普段、葉が緑色に見えるのはクロロフィルが含まれるからであるが、寒くなり日照時間が短くなるとクロロフィルが分解される。また、葉柄の付け根に離層という特殊な水分を通しにくい組織ができ、葉で作られた水溶性のブドウ糖や蔗糖などの糖類やアミノ酸類が葉に蓄積し、その糖から光合成を利用して新たな色素が作られたりする。その過程で葉の色が赤や黄色に変化し、紅葉が起こる。


日本の冬
黒姫山斑尾山妙高山戸隠山飯綱山とともに北信五岳のひとつに数えられている山で、今から約17万年前ごろから火山活動を初め、4万年前ごろに現在の中央火口丘である小黒姫山(2,046m)を形成した。外輪山と中央火口丘の間には火口原が広がり七ツ池がある。南東方向より見た整った姿から信濃富士とも呼ばれている。
古くから信仰の対象とされ、黒姫というお姫様の悲話伝説(黒姫伝説)があり、山名の由来になったと言われている。冬季には黒姫高原スノーパークでスキーやスノーボードが楽しめる。


Copyright 2023 日本の四季 All Rights Reserved

htmlに動画を埋め込む

www.ditjapan.com


jam-cf.com


html5からhtmlに直接動画データを埋め込むことが出来るようになりました。
htmlで扱える動画データはmp-4とweb-mの2種類です。

<video src=""></video>


html5ではvideoタグを使うことで簡単にページに動画データを埋め込む事が出来ますが、スマートフォンで見た場合にはiOSandroidで対応している物、していない物が違うので注意が必要です。場合によっては以前のように「PCでは動画」「スマートフォンでは画像」というやり方が必要になってきます。

オプション設定

  • controls:コントロールパネルを表示する
  • autoplay(muted属性とセット):自動再生
  • loop:リピート再生
  • poster="":画像を指定することで動画が読み込まれるまで指定した画像が表示されます

iOSでvideo要素が表示されない場合

iOSでは自動再生が設定されている動画は表示されない事があります。その際にはvideo要素に「playsinline」属性を指定します。

<video id="" src=""  muted loop playsinline></video>

SVGを使ったアニメーション

carlphilippebrenner.com

tympanus.net

http://gardenstudio.com.br/gardenstudio.com.br

jakearchibald.com

SVGとは?

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

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


blog.codecamp.jp




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


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

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


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

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


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





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

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

forwards

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

backwards

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

both

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





See the Pen
svg-text-animation
by yachin29 (@yachin29)
on CodePen.

フリー素材集

svgで手書き風のテキストアニメーション


See the Pen
svgで手書き風アニメーション
by yachin29 (@yachin29)
on CodePen.

1.IllustratorSVG画像を作成

まずはIllustratorでアニメーションで動かしたい文字を書きます。この時、なるべく細い筆記体のフォントを選ぶと良いでしょう。レイヤー名はtextにしましょう。文字を書いたらアウトラインにし、レイヤーをロックしましょう。



次に、新しいレイヤー(mask)を作り、そこに下のレイヤーの文字が隠れるように線を描きます。


この時にアニメーションで動かしたい順番に線を引くようにしましょう。文字を綺麗に隠せたらSVGで保存します。



2.htmlとcssでアニメーションの作成

svgファイルの下の方に出来ているmaskレイヤー部分を「mask」タグで囲みます。

<mask id="mask-wrapper">
<g id="mask">


</g>
</svg>
</mask>


最後にcssでmaskレイヤーのpathをアニメーションで動かします。この時文字レイヤーに対してmaskの処理をします。

#mask path{
fill:none;
stroke:#ffffff;
stroke-width:7;
stroke-dasharray: 1800px;
stroke-dashoffset: 1800px;
animation: line 3s 0.4s forwards;
}
@keyframes line{
0%{stroke-dashoffset: 1800px;}
100%{stroke-dashoffset: 0;}
}


#text{
mask: url(#mask-wrapper);
stroke: #000;
}


さらにhtml内にインラインで入っているsvgコードを外部ファイルに戻してloadメソッドで呼び出します。
とりあえず簡単なloadで呼び出しましょう。

$('#logo').load('txt.svg');


ajaxを使う場合は

$.ajax({
url: 'txt.svg',//ここにsvgファイルのパスを入れる
type: 'GET'//データ通信方法
})
.then(
// 1つめは通信成功時の処理
function(data){
	var svg = $(data).find('svg');
  $('#logo').append(svg);
},
// 2つめは通信失敗時の処理
function(){
	alert('読み込み失敗');
})







See the Pen
svg-handwriting animation
by yachin29 (@yachin29)
on CodePen.