WEBサイト制作の勉強

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

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

Webサイトの構成表の作成

Webサイト制作

Webサイトの構成を明確にする為に必ず、Webサイト構成表を作成しましょう。
「サイト全体で何ページになるか？」「どのページにどんな内容のコンテツを入れるか？」「どういう順番でコンテンツを並べたら、ユーザーが見やすい・解りやすいか？」
などは、必ずデザイン部分に入る前に決めてしまいましょう。もちろん作る過程で多少変更はありますが、基本的には入れるべきコンテンツの種類・内容・順番が決まった段階で、ワイヤー・カンプに入ります。
この構成表はサイトマップとは違い、自分自身のサイト制作作業をスムーズに進める為に用意する物です。

サイトマップとは？

サイトマップとは、サイト全体のページ構成や、「どの様なコンテンツが入るか？」などを示すためのもので、サイト制作を進める上で無くてはならない物です。
サイトマップは大きく分けると、ユーザー用と検索エンジン用の２種類があります。


構成表作成の手順

掲載させるコンテンツのグループ分け
いきなり、構成表を作るのでは無く、まずはそのWebサイトに必要なページを全て書き出してみましょう。この時は階層、カテゴリーなど関係なくとにかく思いつくままに。それが終わったらその中でグループ分けをします。


コンテンツの重要度をランク付け
コンテンツのグルーピングが終わったら、次はどの様な順番でページに載せていくかです。気をつけなければいけないのは、作る側やクライアントが「これは重要だ！」と思っているページでも、ユーザーにとって価値のあるコンテンツ・情報か、どうかをしっかりと見極めて、順番を決めましょう。また、コンテンツの順番はSEOとも関わってくるので、上位検索を考えている人はここで、必ず、「検索キーワード」を選定し、キーワードの内容も加味したランク付けを行いましょう。


ユーザーの利便性を考える
Webサイトの階層が深ければ深いほど、ユーザーは多くのリンクをクリックしなければなりません。要点をしぼってなるべく浅い階層（２〜３階層）を目指しましょう。また、ユーザーがどういう順番で情報を取得すると、ユーザーにとって便利なサイトになるか、などユーザー目線での導線作りを心がけましょう。





課題

自身で１つサイトを探して、自分なりに「サイトの構成表」を作ってみましょう。そしてクライアントワークのサイトの構成表も必ず作成しましょう。


f:id:yachin29:20171007194726p:plain

the-ringo.jp

上記のサイトの場合の例

コンテンツ構成表

ページ構成：5ページ

  1. Home：トップページ
  2. About
  3. Menu
  4. Party
  5. Contact
  6. Reservations（外部サイトへのリンク）
Homeページのコンテンツ内容
  1. ロゴ(共通)
  2. グローバルナビ(共通)
  3. キービジュアル
  4. aboutの概要（aboutページへのリンクボタン）
  5. menuの概要（menuページのイメージ画像、Menuページへのリンクボタン）
  6. お店情報（お店情報のイメージ画像、Contactへのリンクボタン）
  7. 外部サイトへのリンク（食べログ・ぐるなび・外部web予約システムサイト）
  8. 次ページ（aboutページ）へのリンク
  9. フッター（コピーライト、SNSリンク）
aboutページのコンテンツ内容
  1. ロゴ(共通)
  2. グローバルナビ(共通)
  3. キービジュアル
  4. ページ内リンクボタン
  5. お店のコンセプト（店内などのイメージ画像）
  6. シェフの紹介（シェフの画像）
  7. SNSへのリンク
  8. 予約への誘導
  9. 外部サイトへのリンク（食べログ・ぐるなび・外部web予約システムサイト）
  10. 次ページ（Menuページ）へのリンク
  11. フッター（コピーライト、SNSリンク）
Menuページのコンテンツ内容
  1. ロゴ(共通)
  2. グローバルナビ(共通)
  3. キービジュアル
  4. ページ内リンクボタン
  5. シェフのご挨拶
  6. 料理５品の紹介・料理の画像付き
  7. シェフが料理しているイメージ画像
  8. 予約への誘導
  9. 外部サイトへのリンク（食べログ・ぐるなび・外部web予約システムサイト）
  10. 次ページ（Partyページ）へのリンク
  11. フッター（コピーライト、SNSリンク）
Partyページのコンテンツ内容
  1. ロゴ(共通)
  2. グローバルナビ(共通)
  3. キービジュアル
  4. ページ内リンク
  5. 貸切パーティーについて
  6. プランの内容例を４例（人数、予算、要望に応じて変更可、という事を明記）
  7. 貸切パーティーの場合の細かい情報
  8. パーティーのイメージ画像
  9. 予約への誘導
  10. 外部サイトへのリンク（食べログ・ぐるなび・外部web予約システムサイト）
  11. 次ページ（Contactページ）へのリンク
  12. フッター（コピーライト、SNSリンク）
Contactページのコンテンツ内容
  1. ロゴ(共通)
  2. グローバルナビ(共通)
  3. キービジュアル
  4. ページ内リンク
  5. アクセス（住所、最寄駅からの情報、マップ）
  6. 営業時間
  7. 予約への誘導
  8. 外部サイトへのリンク（食べログ・ぐるなび・外部web予約システムサイト）
  9. 次ページ（Homeページ）へのリンク
  10. フッター（コピーライト、SNSリンク）

レスポンシブに対応した定義型リストの制作

Webサイト制作

使用するサンプルテキスト

<div class="inner news-box">
<div class="news">
<h2>ニュースリリース</h2>
<dl>
<dt>2018年1月4日</dt>
<dd>EC限定“バレンタイン用ギフトセット”「GRAND KIRIN GRAND GIFT（グランドキリン グランドギフト）」をAmazon.co.jpおよびLOHACOにて数量限定で先行発売</dd>
<dt>2017年12月27日</dt>
<dd>紅茶飲料のNo.1ブランド「キリン 午後の紅茶」年間販売数量が過去最高を更新！</dd>
<dt>2017年12月26日</dt>
<dd>ワイン一部商品の価格改定について</dd>
<dt>2017年12月22日</dt>
<dd>「第6回いきものにぎわい企業活動コンテスト」で「審査員特別賞」を受賞！ 椀子（マリコ）ヴィンヤード生態系調査・植生再生活動</dd>
<dt>2017年12月21日</dt>
<dd>「キリンビール大学」レポート　2016年 世界主要国のビール消費量</dd>
<dt>2017年12月21日</dt>
<dd>「復興応援 キリン絆プロジェクト」熊本支援 熊本ごはん組に支援金を助成</dd>
<dt>2017年12月20日</dt>
<dd>「STARFLYER Black BREWERY」を開催</dd>
</dl>
</div>

<div class="info">
<h2>新着情報</h2>
<dl>
<dt>2018年1月5日</dt>
<dd>「Ketel One - ケテル ワン」サイトを公開！</dd>
<dt>2017年12月31日</dt>
<dd>「キリン一番搾り生ビール」新CM『「おいしい日本」篇 60秒』を公開！</dd>
<dt>2017年12月26日</dt>
<dd>キリン食生活文化研究所　連載コラム「Vol.20 ユニークな時代を生きている幸せ」公開中！</dd>
<dt>2017年12月25日</dt>
<dd>「キリン ファイア」新CM『「冬の高台 年末」篇』を公開！</dd>
<dt>2017年12月19日</dt>
<dd>「キリン 氷結® 紅ほっぺ＜期間限定＞」を新発売！（12月19日発売）</dd>
<dt>2017年12月19日</dt>
<dd>キリン食生活文化研究所　キリン食生活文化研究所のアンケート「ちょっと教えて」実施中！</dd>
<dt>2017年12月12日</dt>
<dd>「キリン メッツ みかん」を新発売！（12月12日発売）</dd>
</dl>
</div>
</div>

ワイヤーフレームの作成

Webサイト制作

ワイヤーフレーム

f:id:yachin29:20160607201954j:plain


ワイヤーフレームとは 簡単に言えば「サイト設計図面」です。 つまり、制作するウェブサイトの要素や機能、情報を設計図面のように配置しておき、クライアントや制作者と認識を合わせるためのものです。




Wirify-見ているサイトを一瞬でワイヤーフレーム化してくれる便利なサービス


見ているサイトを一瞬でワイヤーフレーム化してくれる便利なサービス、「Wirify」
使い方もいたって簡単です。


1. 「Wirify」のサイトにアクセスし、「Wirify by Volkside」をブラウザのブックマークツールバーに入れる。

2. ワイヤーフレームにしたいサイトを表示した後、ブックマークツールバーに入れた「Wirify by Volkside」をクリック。

そうすると、見ているサイトがワイヤーフレームのような表示になります。
ワイヤーフレームの画面をクリックすると元に戻ってしまうので、残しておきたいときはキャプチャで画像として残しておきましょう。




www.wirify.com

動画を背景にする

HTML5+CSS3

最近は動画を背景に使ったWebサイトもよく見かけます。サイトの雰囲気や、サービスの具体的な内容を背景に流すことで、よりユーザーの視点をスクリーンに注目させることができます。




実例

www.joe-san.com


optimo.com


www.kalexiko.com


poolhouse.co



作る際に気を付けるポイント
  • 動画ファイルは出来るだけ軽くする。（あくまでイメージなので長さも1分くらいをめどに）
  • デフォルトではミュートの設定に
  • あくまでも背景なので自動再生とループ再生の設定にする。（自動再生が効かないスマホでは代替え画像を使用する）


pixabay.com


まずはhtmnl5のvideoタグのプロパティを覚えましょう




src="" 　　　(URL)ファイルのURL
height="" 　数値 要素の高さ
width="" 　　　数値 要素の幅
autoplay="" autoplay 自動的に再生を行います。
controls="" controls 動画再生をコントロールするUIを表示します。
loop="" 　　loop 動画を繰り返し再生します。
metadata 動画ファイルを読み込みはじめるタイミングを設定します。preloadが指定されていてもautoplayが入っている場合、autoplayが優先されます。
poster="" (URL) ブラウザが指定したファイルを再生できない環境の場合、代替する画像を指定できます。
muted 　　動画に音声がついている場合、音を出さない設定にできます。
mediagroup="" 任意の文字列 audioとvideoなどを同期できます。同じ値を入力することで、同じグループとして指定し、再生を同期することができます。

画像をレスポンシブに対応させる（可変にする）

HTML5+CSS3

画像をレスポンシブに対応させる為にはたった２種類のやり方しかありません。

img画像であればフルードイメージ化させる。

background画像であれば、background-sizeの指定をする。


この２種類の使い方と特徴を覚えれば、画像に関しては問題なくレスポンシブに対応させる事が出来ます。
どちらの方法を用いれば良いかは、文章構造から考えてその画像が「imgタグ」で入れるべきなのか、背景画像として入れるべきなのかを考えれば良いだけです。

ポイントとしては、
「img要素」で入れた場合にはフルードイメージ化させる為、画像の原寸より大きく表示される事はありません。
また画像の縦横比も保ってくれる為、幅を縮めると同じ比率で高さも小さくなって行きます。なので基本的には高さの設定はしなくても良い場合がほとんどです。


これに比べ「background-size」を指定した背景画像は指定に寄っては原寸より大きく表示される事があります。
また、背景画像を表示させる為には必要な高さを確保する必要がある為、高さの指定をどうするか、という事が問題になって来ます。
授業では高さを%指定すると不安定になるので、代わりにpaddingで画像の高さ分を確保するという方法を取りました。
「background-size」を指定した物は%指定はもちろん、pxでも1px単位で表示の大きさをコントロール出来る為、こちらの方が便利な場合もあります。

画像のフルードイメージ化

img要素で見せる画像は重要度が高いため、必ず綺麗に見せる必要があります。その為絶対に原寸（100%）以上拡大して表示させるのはNGなので「max-width: 100%」という指定をします。

img {
  max-width: 100%;
}

未経験者のポートフォリオの作り方

Webサイト制作 ポートフォリオ

未経験者にとってポートフォリオをどうやって作れば良いか？
非常に悩むところです。

http://katoshun.com/blog/からの抜粋です。

未経験者のポートフォリオに載っている作品は、以下のようなものがほとんどです。

  • スクールの課題で作った架空の会社のサイト
  • スクールの課題で作った趣味のサイト
  • スクールの課題で作ったPhotoshopやIllustratorの練習のためのイラスト
  • 自分のブログ


一方、私が内定を出した未経験者（20代後半の方）のポートフォリオは以下のようなものでした。

  • スクールの課題で作った架空の会社のサイト
  • スクールの課題で作った趣味のサイト
  • スクールの課題で作ったPhotoshopやIllustratorの練習のためのイラスト
  • 自分のブログ
  • 飛び込みをして作らせてもらった雑貨屋のサイト
  • 知り合いのフリーランスデザイナーから請け負ったランディングページ（商品を案内するための１ページもののサイト）


授業でも散々言っている事ですが、ポートフォリオに自身の成果物を掲載する上で、架空サイトや授業で作った演習サイトだけではアピール不足です。特に未経験者であればなおさら、それだけで結果を出すのは至難の業と言えます。
なのでうちの学校では３ヶ月目に実際にクライアントを生徒自身で探してもらい、クライアントワークを含めた活きたサイト制作を行って貰っています。
さらに、自身のポートフォリオには制作したクライアントサイトのキャプチャーやアドレスを貼るだけでなく、クライアントワークの詳細や、どういう工程を経てサイトの完成に至ったかなどの内容もしっかりと入れてアピールしましょう。

 

katoshun.com

 

shiromatakumi.hatenablog.com


また、ポートフォリオを作るに当たって、WordPressやBootstrapなどのフレームワークを使用する事も視野に入れておきましょう。
それぞれの長所・短所を理解し、自身にとって最も有効だと思う物を選択する事が大事です。

wordpressのテンプレート

ポートフォリオ ＜ カテゴリ ＜ WordPress無料テーマ-テンプレート紹介サイト


www.choicely.jp


photoshopvip.net


 

Bootstrapのテンプレート

coliss.com


designup.jp


 

HTML5&CSS3ベースのテンプレート

coliss.com


blog.nest-online.jp


photoshopvip.net