サイト&アプリの土台などpc操作中

目次

ディレクトリマップ
のとこへ
ワィヤーフレーム
のとこへ
SEO対策
のとこへ
スニペット
のとこへ
ドメイン
のとこへ
デジタルマーケティング
(SNSマーケティング
など)のとこへ
サイト、アプリ
の目標のとこへ
(KPI, CVRなど)
FTP,filezilla
とこへ
トンマナ
とこへ

制作の流れ

webサイト制作
基本の流れ 要件定義→サイトマップ→ワイヤーフレーム→モックアップ→プロトタイプ

要件定義

ペルソナ

実在するようなリアルさが必要。
モデルは、特定の一人まで絞り込む。 実際には、ペルソナに近い人達にも影響をおよぼす。
アンケートやインタビューにて情報収集。
ユーザーのイメージを担当全員で共有できる。

ミーティング ユーザーシナリオ

ユーザーがどのような行動をとるか仮設をたてる。
実際にサイトやアプリを利用する場面や、場所、目的を仮設する。

サイトマップ(構成図)

目的 作り方

サイトの構成をツリー表示の図にします。

主にパワーポイントやAdobeXDで作成
cacoo cacoo ワイヤーフレーム、サイトマップ作成。
フリープランあり。cacooヘルプ

ディレクトリマップ

全ページを記載したコンテンツを分類する一覧表。サイトのファイル構造を示す。各ファイル名をまとめて記載。

Excelで作成されることが多い 作成の意義 主な構成 ページ番号ページの総数の確認
タイトル名
各ファイル名 (HTMLファイル、CSSファイル、画像ファイル等)
URL
ディレクトリ名(HTMLやCSS,JS等各ファイルを収容するフォルダ名)
進捗状況担当者
備考

ワイヤーフレーム

ワイヤーは「線」、フレームは「枠」のこと 基本

ページごとに”何をどこに、どう配置するか”、コンテンツやレイアウトの構成図です。
ページ単位で載せる情報を整理します。
基本的に静的で色やデザインなどは考えない、

手順 「Illustrator」、「Photoshop」、「Power Point」等で作成することが多い。 ワイヤーフレーム 各パーツ

各パーツの数、位置、大きさを記載する。

ヘッダー webページの上部のこと。 最初に目に入る部分なので、アイキャッチとしてメインビジュアルをしっかり作ります。

フッター 会社情報、連絡先など

ロゴ左上に配置されることが多い。
企業理念やメッセージ
グローバルナビゲーション
画像
キャッチコピー、タグライン
リンク
広告

モックアップ

ワイヤーフレームよりさらに色やサイズなどデザインを意識したもの。余白などの細かい箇所まで作りこむ。
デザインカンプとほぼ同じ意味。画像編集に強いPhotoshopを使うことが多い。

サイトの[イメージ]、[カラー]、[文言]、[表現]などの統一。

プロトタイプ

コードなしでデザイン画面の画像のみでつくる。実際のアプリの「動き」、「操作しやすさ」など機能性を確認する
モックアップにアニメーションなど動きをつけたもの。 仕様変更が容易。

外部リンク参考サイトさん プロトタイプについて

prott prott PCから画像を追加 ワイヤーフレーム機能を使って作成等がある。
ワイヤーフレーム機能 prottワイヤーフレーム
図形、テキスト、アイコンをドラッグ&ドロップ。 アプリに必要なandroidやiOSのコンポーネントがたくさんある。

LP

ユーザーが最初にアクセスするページのこと

LPについて

命名規則

記号は「-」(ハイフン),「 _ 」(アンダースコア)のみ。

windowsでファイル名に使用できない 「\」(エンマーク),「/」(スラッシュ),「:」(コロン),「*」(アスタリスク)
「?」(クエスチョン),「”」(ダブルクォーテーション),「|」(パイプ)

役割、場所などを「-」(ハイフン),「 _ 」(アンダースコア)で、つなぐ。

全て小文字で統一する

CSS設計

BEM

導線

ユーザーが"サイト内を見る順序"のこと。

サイト内回遊率を上げるために、しっかり設定します。

タグライン

webサイトだけではなく商品に記載したり、CMで流したりする。
分かりやすく具体的に企業やブランドのコンセプトや利点をアピール

現在の顧客だけでなく潜在的な顧客にもアピールする
15文字程度で作成
キャッチコピー季節やキャンペーンごとなどに作成
タグラインほぼ不変

レギュレーション

「規約」「規則」のこと 。サイトのクオリティを保つために設定。

「NGワード」や「見出し」、コンテンツの文字数など

レギュレーションについて

seo 対策

seo

SEOきほん

WEBコンテンツが検索エンジンにインデックスされていることが大前提。

ある程度運営するとWEBサイトはクローラが頻繁に訪れるためインデックスに登録されるのが早くなり、
新しく更新した記事でも検索結果に反映されるのが早くなります。

新しく開設したサイトはクローラの訪問頻度が低いためWEBページを更新してからインデックスに登録されるまでの時間が長く、
検索結果に表示されるまで時間がかかります。

titleタグ 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

RSSアイコン

Webサイトの新着・更新情報を配信するシステム。
RSS(Rich Site Summary リッチ・サイト・サマリーの略)

RSSリーダー

Feedly Feedly

カスタマージャーニー

消費者の行動パターンを知るために作成する。
最初の段階から商品、サービス購入など最終目標までの過程を顧客の気持ちと行動を時系列に表現する。

タッチポイント ユーザーとの接点、サイトやSNS、実際の商品など。

カスタマージャーニーマップ

カスタマージャーニーを横軸と縦軸を使い図にしたもの。
ユーザーの行動、思考・感情(喜び、失望)、課題などを時系列と共に図にする。

カスタマージャーニーマップ作成

デジタルマーケティング

デジタルマーケティング

WebサイトやSNS、アプリなど複数のチャネルや手法を用いて消費者、消費行動を把握分析すること。

Webマーケティング Webサイトに特化したマーケティング。デジタルマーケティングの一部。

Eメールマーケティング「メールマガジン」、「広告メール」などで消費者へ直接アプローチすること。
Webサイトへの誘導など
アプリ マーケティング アプリから通知を送る「プッシュ機能」を使うことで、ユーザーにタイミングよく直接情報発信ができる
また、GPSによって対象の地域ユーザーに通知を送ったりします。
IoTマーケティング IoT(Internet of Things)から収集されるデータを活用する。

SNSマーケティング

SNS中

TwitterやInstagramなどのSNSでの広告や自社アカウントでの情報発信。
ユーザーに企業、商品、サービスを認知させる。
ブランドイメージの向上や商品購入を促す。
SNSは頻繁に利用する人が多く有益な情報発信などで、ユーザーとの接点が増え親近感や共感をもってもらえやすい

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

filezilla
FTPホスト名

見積もり

[トップページデザイン]、[画像]、[バナー作成]、[コーディング]など各作業ごとに、どのくらいの期間や人員が必要か決める。

各作業工程ごとに人数と作業単価を組み合わせ、人件費を計上する。 上へボタン

ガッツ男子