サイト&アプリの土台など
目次
制作の流れ
基本の流れ
要件定義→サイトマップ→ワイヤーフレーム→モックアップ→プロトタイプ
要件定義
-
- 競合Webサイトをチェックなど情報収集
- サイト制作、リニューアルの目的
- ターゲット層選定
- サーバー、ドメインなどシステムの決定
- スケージュール設定サイト公開日など
- 予算決定
ペルソナ
実在するようなリアルさが必要。
モデルは、特定の一人まで絞り込む。
実際には、ペルソナに近い人達にも影響をおよぼす。
アンケートやインタビューにて情報収集。
ユーザーのイメージを担当全員で共有できる。
ユーザーシナリオ
ユーザーがどのような行動をとるか仮設をたてる。
実際にサイトやアプリを利用する場面や、場所、目的を仮設する。
サイトマップ(構成図)
目的
-
ウェブサイトの全体図の確認
- CV、各コンテンツへの導線の確認
作り方
サイトの構成をツリー表示の図にします。
主にパワーポイントやAdobeXDで作成
-
ユーザーの利便性を考え、クリック数を少なくし階層を深くしない。一層、二層くらいまで。
-
必要なページをリストアップ。”優先したいページ”、”見せたいページ”をランク付け。
ディレクトリマップ
全ページを記載したコンテンツを分類する一覧表。サイトのファイル構造を示す。各ファイル名をまとめて記載。
Excelで作成されることが多い
作成の意義
主な構成
ページ番号ページの総数の確認
タイトル名
各ファイル名 (HTMLファイル、CSSファイル、画像ファイル等)
URL
ディレクトリ名(HTMLやCSS,JS等各ファイルを収容するフォルダ名)
進捗状況担当者
備考
ワイヤーフレーム
ワイヤーは「線」、フレームは「枠」のこと
基本
ページごとに”何をどこに、どう配置するか”、コンテンツやレイアウトの構成図です。
ページ単位で載せる情報を整理します。
基本的に静的で色やデザインなどは考えない、
-
「TOPページ」、「各ページ」にそれぞれ何を載せるか、テーマなど。
- 各パーツの画面における専有面積、画面の比率など。
手順
-
「ロゴ」や「ナビケーション」などコンテンツ、パーツの優先順位を決める
- 何をどこに配置するか、1カラムなどレイアウトを決める。
- 「画像」、「ナビゲーション」「リンク」の種類、数、サイズを決める。余白の大きさなど。
- 出来れば、具体的な文字数のテキストを入れる
「Illustrator」、「Photoshop」、「Power Point」等で作成することが多い。
ワイヤーフレーム 各パーツ
各パーツの数、位置、大きさを記載する。
ヘッダー
webページの上部のこと。
最初に目に入る部分なので、アイキャッチとしてメインビジュアルをしっかり作ります。
フッター 会社情報、連絡先など
ロゴ左上に配置されることが多い。
企業理念やメッセージ
グローバルナビゲーション
画像
キャッチコピー、タグライン
リンク
広告
モックアップ
ワイヤーフレームよりさらに色やサイズなどデザインを意識したもの。余白などの細かい箇所まで作りこむ。
デザインカンプとほぼ同じ意味。画像編集に強いPhotoshopを使うことが多い。
サイトの[イメージ]、[カラー]、[文言]、[表現]などの統一。
プロトタイプ
コードなしでデザイン画面の画像のみでつくる。実際のアプリの「動き」、「操作しやすさ」など機能性を確認する。
モックアップにアニメーションなど動きをつけたもの。
仕様変更が容易。
外部リンク参考サイトさん
プロトタイプについて
prott
prott
PCから画像を追加 ワイヤーフレーム機能を使って作成等がある。
ワイヤーフレーム機能
prottワイヤーフレーム
図形、テキスト、アイコンをドラッグ&ドロップ。
アプリに必要なandroidやiOSのコンポーネントがたくさんある。
LP
ユーザーが最初にアクセスするページのこと
LPについて
命名規則
記号は「-」(ハイフン),「 _ 」(アンダースコア)のみ。
windowsでファイル名に使用できない
「\」(エンマーク),「/」(スラッシュ),「:」(コロン),「*」(アスタリスク)
「?」(クエスチョン),「”」(ダブルクォーテーション),「|」(パイプ)
役割、場所などを「-」(ハイフン),「 _ 」(アンダースコア)で、つなぐ。
全て小文字で統一する
CSS設計
BEM
導線
ユーザーが"サイト内を見る順序"のこと。
サイト内回遊率を上げるために、しっかり設定します。
タグライン
webサイトだけではなく商品に記載したり、CMで流したりする。
分かりやすく具体的に企業やブランドのコンセプトや利点をアピール
現在の顧客だけでなく潜在的な顧客にもアピールする。
15文字程度で作成
キャッチコピー季節やキャンペーンごとなどに作成
タグラインほぼ不変
レギュレーション
「規約」「規則」のこと 。サイトのクオリティを保つために設定。
「NGワード」や「見出し」、コンテンツの文字数など
レギュレーションについて
seo 対策
SEOきほん
WEBコンテンツが検索エンジンにインデックスされていることが大前提。
ある程度運営するとWEBサイトはクローラが頻繁に訪れるためインデックスに登録されるのが早くなり、
新しく更新した記事でも検索結果に反映されるのが早くなります。
新しく開設したサイトはクローラの訪問頻度が低いためWEBページを更新してからインデックスに登録されるまでの時間が長く、
検索結果に表示されるまで時間がかかります。
titleタグ
Yahoo!やGoogleなど検索エンジンの検索結果に表示されます。
title要素は、検索ロボットが重要視する第一位の要素です。
htmlのtitleを30字以内で、しっかり具体的に書きましょう。
書き方
HTMLのhead部分に記述します。<title>webサイトのタイトル</title>
「キーワード」を前方に記述するようにします。
30字以内で記述するようにします。
検索させない
検索エンジンGoogleは、クローラーロボットと呼ばれるものがサイトを巡回して、 ページを登録していきます。
検索エンジンに表示されたくないページなどは、 ロボットが来ないよう設定しておく。
ロボット制御もmetaタグで行い、ロボット制御タグを入力します。
robots meta タグ
<meta name="robots" content="noindex,nofollow">
name属性にrobotsを指定しcontent属性に、カンマ(,)で区切ってnoindex、nofollowを指定する
検索エンジンにインデックス(登録)されたくないページは「noindex」
ページ内のリンクを参照されたくない場合は「nofollow」を記述します。
SEO関連用語
リダイレクト自動的に特定のURLへ転送する設定のこと。旧URLのリンクを新URLに引き継がせる等に使います。
インデックス
クローラーが収集したWEBページのデータを検索エンジンデータベースに格納されること
クローラー
サジェスト
Googleなどの検索エンジンで、キーワードを入力した時に他の候補を表示する機能
「検索する地域」、「検索履歴」等から予測し表示します
スニペット
グーグルなどの検索結果に表示される説明文のこと。通常、テキストのみの表示になります。
書き方
HTMLのhead部分に記述します
<meta name="description" content="説明文">
の説明文のこと。
ユーザーが"クリックしたくなるような説明文"を記述します。
「description」について
リッチスニペット
画像やリストなども表示されます。
強調スニペット
検索結果”最上部”に表示されます
RSS
Webサイトの新着・更新情報を配信するシステム。
RSS(Rich Site Summary リッチ・サイト・サマリーの略)
RSSリーダー
Feedly
Feedly
カスタマージャーニー
消費者の行動パターンを知るために作成する。
最初の段階から商品、サービス購入など最終目標までの過程を顧客の気持ちと行動を時系列に表現する。
タッチポイント ユーザーとの接点、サイトやSNS、実際の商品など。
カスタマージャーニーマップ
カスタマージャーニーを横軸と縦軸を使い図にしたもの。
ユーザーの行動、思考・感情(喜び、失望)、課題などを時系列と共に図にする。
カスタマージャーニーマップ作成
- 「カスタマージャーニーマップ」のゴールを作成。
最終目標の設定。商品、サービスの購入か、問い合わせなのか、
- 縦軸ユーザーの思考感情、問い合わせなどの実際の行動、デバイスなどのタッチポイントなど
- 横軸最終目標までの時間経過。「興味、認知」、「他との検討」「情報収集」「購入」などの各フェーズ、段階
デジタルマーケティング
WebサイトやSNS、アプリなど複数のチャネルや手法を用いて消費者、消費行動を把握分析すること。
-
消費者のキャンペーンやコンテンツに対する反応を詳細迅速に計測。
-
自社サイトへの誘導。
Webマーケティング Webサイトに特化したマーケティング。デジタルマーケティングの一部。
Eメールマーケティング「メールマガジン」、「広告メール」などで消費者へ直接アプローチすること。
Webサイトへの誘導など。
アプリ マーケティング
アプリから通知を送る「プッシュ機能」を使うことで、ユーザーにタイミングよく直接情報発信ができる。
また、GPSによって対象の地域ユーザーに通知を送ったりします。
IoTマーケティング
IoT(Internet of Things)から収集されるデータを活用する。
SNSマーケティング
TwitterやInstagramなどのSNSでの広告や自社アカウントでの情報発信。
ユーザーに企業、商品、サービスを認知させる。
ブランドイメージの向上や商品購入を促す。
SNSは頻繁に利用する人が多く有益な情報発信などで、ユーザーとの接点が増え親近感や共感をもってもらえやすい。
-
タイミングよくセールやキャンペーン情報を発信できる
-
Instagramの写真から商品を購入したり、飲食をする効果もある。
- 口コミや拡散効果など、新しい客層や潜在層にアプローチできる
- ユーザーからのコメントや「いいね!」などの反応がすぐに見られる
- 費用が、あまりかからない
- 炎上などの危険もある。
- 鮮度の高い情報を流し続ける必要がある
Twitter 日本語では最大140文字以内
オンボーディング
始めて使うユーザーを定着させるプロセスのこと。登録を簡単にできるようにする。
canva
ブラウザから使える
canva
KDDIウェブコミュニケーションズが、Canvaの独占業務提携契約を締結している
サイズ変更は有料プランになる
使い方
無料会員登録する 初期の使い方
写真をアップロードしてデザインすることもできます。
元に戻す。(上部真ん中あたりに表示される)
ファイル名を変更 上部「共有」の左側をクリック
編集を行うたびに自動保存されます。(上部真ん中あたりに表示される)
保存されたデータは、Canvaのトップページに追加されます。クリックすれば編集再開できます。
オウンドメディア
企業が運営するWebメディアのこと。企業が運営するウェブマガジン、ブログなど。
広い意味では、自社サイト、ECサイトなど
商品や企業の知名度の向上、新規顧客の獲得など、様々。
ページ、記事を多数作成する。
自社で管理するためコストが安くすむ。
トリプルメディア
オウンドメディア、アーンドメディア、ペイドメディアを合わせて、「トリプルメディア」と呼ぶ。
アーンドメディア
口コミサイト、掲示板など。自社でのコントロールが難しく「炎上」状態になることがあります。
ペイドメディア
[ディスプレイ広告]、[リスティング広告]などのネット広告。
オウンドメディアではアプローチできないユーザー向け。
レスポンシブ
主にスマートフォンでの設定や確認。
レスポンシブのページへ
開発ツール
ソースコードやレスポンシブの確認。スクリーンショットが撮れる。
firefox
ショートカットキー windows F12キー。または、 Ctrl + Shift + I
OSX Cmd + Opt + I
Google Chrome
ショートカットキー
F12キー
FTP
FTPソフト
パソコンとウェブサーバーとの間で、ファイルのやり取り(転送)をする専用のソフトウェアのこと
外部リンク参考サイトさん
ftpsについて
filezilla
見積もり
[トップページデザイン]、[画像]、[バナー作成]、[コーディング]など各作業ごとに、どのくらいの期間や人員が必要か決める。
各作業工程ごとに人数と作業単価を組み合わせ、人件費を計上する。