企業は、何にためにWebサイトを作るのでしょうか。
企業の知名度向上もありますが自社の商品やサービスの販売拡大も目的の一つです。
Webサイトを作る立場としては、作成したWebサイトの貢献度を提示できると顧客との関係を深めるポイントになります。
Webサイトの貢献度を測定し改善の提案により継続的な仕事の確保にもなります。
Webサイトの貢献度を測定するためには、Googleのツールを活用するのが近道です。
以下のGoogleツールを理解し活用できるようになりましょう。
Google Search Console
Google Search Console(サーチコンソール)は、Google が提供している無料のツールで、Google 検索でのサイトのパフォーマンスや問題点を分析・改善することができます。
サーチコンソールでできること
- サイトのインプレッション数、クリック数、掲載順位を分析する
- ユーザーがサイトにアクセスしているキーワードを確認する
- サイトのインデックス状況を確認する
- サイトの問題点を把握し、修正する
- モバイルユーザビリティの状況を確認し、改善する
サーチコンソールで活用できること
- サイトの技術的な決定に関わる
- アナリティクス、Google トレンド、Google 広告などの Google ツールと組み合わせて、詳細なマーケティング分析を行う
- キーワード選定の参考にしたり、検索順位を見てリライトの対象を決めたりする
サーチコンソールはページごとにインデックスの登録していく必要がある。
検索キーワードを見て、SNSのタグなどに入れると有効!
Googleアナリティクス
Google アナリティクス(GA)は、Google が提供する無料の Web アクセス解析ツールです。ウェブサイトやアプリのユーザー行動を分析し、マーケティングやサイト運営に役立つレポートを作成することができます。
Google アナリティクスでわかること
- ユーザーがサイトやアプリをどのように利用しているか
- ユーザーの属性(年齢、性別、言語など)
- ユーザーがサイトにどのようにアクセスしたか(流入経路)
- ユーザーがサイト内でどのような行動を行ったか
- サイト管理者が設定したゴールの達成度
Google アナリティクスは、マーケティングの投資収益率の改善や、サイトの現状把握、改善に役立てることができます。
WEBデザイナーが関係する仕事
デザイナーは解析には直接関係ないが、マーケターから、ABテストをしたいから2案作成してほしいなどオーダーがある。
並びを変える、ボタンの色を変える、テイストを変えるなど。
【授業外】chatGPTで作成したチラシとLP
https://g100.deau-ag.com/portfolio/archives/83
AIでどこまで制作できるのか?と講師が試した作品についての共有。
チラシの制作
ChatgptでDMを制作したところ、作品としてはまずまずの出来だった。配置や色の組み合わせなど参考できる点が多く、案を出すのに適している。
文字もすべて画像で出力されている。ジャンプ率や誤字などあるので、最終的には人間の手によって修正は必要。


LPの制作
LPのメインビジュアルのところはうまく作れたが、それ以外のところはまだまだ発展途上だった。
HTMLとCSSではたくさん作ってくれた。
LPの制作の時も配置などの案で使えそう。
プロンプトで何を作ってほしいのか、提示することが大事。
画像なのか?キャッチコピーなのか?
今後の活用
chatgptでレイアウトやキャッチコピー(今までは人間が作ってた)
AdobeのFireflyで画像作成(今までは画像の検索に時間がかかってた)
あとは人間の手直し。AIを自分のアシスタントにしてうまく使っていこう。
フリーのWEBディレクターは食べていける職業なので、AIツールをどんどん活用して使いこなしていくのがおすすめ。
PHOTOSHOPの写真補正について
歯を白くする
投げ縄ツール→彩度をさげる、色相
肌
大きいニキビ、ほうれい線はスポット修復ツール
毛穴はぼかす手順が必要
レイヤーコピー3つつくる→フィルター→ぼかし(ガウス)で毛穴をみえないくらいぼかす→マスクをかける(白マスク)→マスクを反転させる(黒にする)→ブラシに持ち変える流量100%→15%とかに下げて隠したい箇所を塗る
輪郭フィルター→ハイパス→グレーになってるから、ピクセル下げていく。輪郭抽出(1pxlくらい)
オーバーレイ
ゆがみツール
フィルター→ゆがみ→シェイプの変形(胸を大きくする、くびれを作る等)
スムーズツールで滑らかに整えてくれる。いちいち調整しなくていいから楽。
服のしわもとれる
足伸ばす
ゆがみツールでひざ下伸ばす大きいブラシで下からつかんで伸ばす、全体に伸ばす
画像の周りもぼけるので、そこは注意。
伸ばすときは関節は触らない。
空を変えたい
被写体選択後、生成AIで書き出す。
編集→生成した空に置き換え
ニューラルフィルター(ダウンロード必要)
肌のスムース、メイクアップなど指定した画像にしてくれる。
調和
被写体と背景でなじませてくれる
深度ぼかし
一眼レンズでぼかしたみたいに被写体の周りをぼかしてくれる
今後物の置き換えが進化していく(アパレルで使われそう)
