Tag Archives: コンテンツ作成

【メモ】“数値化”で凡庸なコピーを刺さるコピーへ

blog_compose

「顧客満足度の高い」→「のべ8万人が毎日利用」“数値化”で凡庸なコピーを刺さるコピーへ ─ BtoB Webマーケティング実践講座第7回

数字セットにして説得力もたせるコピーの例が参考になります。

【メモ】組み合わせて使うだけで高い成果を出すキャッチコピーの基本型30選

27-Edit Text

キャッチコピーの型について
↓↓
組み合わせて使うだけで高い成果を出すキャッチコピーの基本型30選 | バズ部
昔から今まで、普遍的に高い反応率を稼ぎ続けているキャッチコピーの基本の型を30個ご紹介する。この基本型を最適な形で組み合わせて使うと、誰でも簡単に反応率の高いキャッチコピーを作ることができる。 …

キャッチコピーの型を30個紹介


【メモ】ファッション系EコマースURBAN RESEARCHの「商品写真」

shopcart_128x128

アーバンリサーチの商品紹介画像は、小物を用いたコーディネイト写真の撮影を積極的に行っててるという話

 

URBAN RESEARCH各ブランドからファッション系Eコマースにおける「商品写真」について考えてみた(実践編)
ちなみにアーバンリサーチの関連ブランドは、自社で撮影した写真をZOZOTOWN側へ提供を行なっていて、同時にショップのディスプレイにも併用。クリエイティブの共通化という意味でも効果が見込めるのかな?ど …

アーバンリサーチの商品紹介画像は、小物を用いたコーディネイト写真の撮影を積極的に行っててるという話

特集ページ制作時に、検索されやすいキーワード選定の参考になるGoogle Adwordsツール

old-edit-find

ECやメディアの特集ページを作る際、PVを上げる(可能性が高くなる!)ために

Google AdWords キーワードツールを利用することで、特集ページのテーマとなるキーワード選びの精度を高めるという方法があるのでやり方を紹介します。

 

【ペパボ社内向けHTML講座】WEBサービスのデザインとは from @chocolatina

ネタがつきてきたので社内の勉強会で、ディレクションにも役立つものをブログのネタに使わせてもらうことにしました。

本日はペパボ新卒デザイナー陣にコーディングを教えたデザイナー しょこたんが、社内で主催したHTML入門講座の内容を、ほぼそのままお届けします。

※写真はHTML勉強会の様子

ペパボHTML入門講座1(全六回)

講師プロフィール @chocolatina
社内のあだ名:しょこたん
http://chocolatina.jp/
http://twitter.com/chocolatina

paperboy&co.2009年入社
hetemlデザイナー(2年半)  → 現在、パブー デザイナー
その間、新卒1期生のコーディング講師ギフポ立ち上げデザイン
HTML歴:13年ぐらい
CSS歴:11年ぐらい
好きな海外ドラマ:LOST/FRINGE/STARTREK/FULLHOUSE

HTMLに入る前に、まずはじめに

WEBデザインとは

  • モテるホームページを作る魔法のようなもの ( WEBデザインが出来るとモテる。)
  • アートとは違う ( アートは表現そのものが目的。)
  • 「目的」ではなく「手段」( あくまで何か問題を解決するための「webデザイン」)
  • 情報をデザインすること( 情報を整理し、訴求し、ユーザーにアクションを起こさせる。)

コーディングとは何か

デザイナーが、PhotoshopやFireworksで作った一枚の絵を、
コーダーがそれぞれ画像やテキストに切り出して、HTML/CSS/JSなどを使って組み立てること
ペパボではデザイナーとコーダーは特に分かれていない
制作会社によっては分かれてる

何のためのコーディングか

サイトの目的(情報提供や申込など)を達成させるため。
理論的には、その目的が効果的に達成されれば、WEBデザイン・コーディングは成功といえる

そのためには
  • WEBサイトの表示を正しく行い  (信頼感の保持)
  • ユーザーが迷わずに目的を達成出来るよう導線を確保し (ユーザービリティ)
  • 検索エンジンにも最適化され (検索順位の保持)
  • 更新性を高めメンテナンスしやすくし (人件費の削減とスピーディな情報提供)
  • ページ容量を少なくして表示を早くする (離脱率の低下)

WEB制作会社のWEBデザイナーと、WEBサービスを提供しているペパボのWEBデザイナーの違い

WEB制作会社

チームにいるメンバー
よくある例) マネージャー1名、営業2名、
WEBディレクター1名、WEBプログラマー1名、WEBデザイナー2名、コーダー2名
  • サイト製作費はクライアント企業
  • 色々なサイトを担当する。
  • クライアントから求められたものを作る
  • エンドユーザーにとって最適でも、クライアントが求めていないものは作れない。
  • サイト製作費はクライアント企業の広告費から捻出される

ペパボのようなWEBサービスの会社

チームにいるメンバー

例)部長またはプロデューサー1名、ディレクター複数名、サポート複数名、
WEBプログラマー複数名、サーバー複数名、WEBデザイナー複数名
※人数はサービスの規模により異なります。

WEBサービスのデザインをする
  • サイト製作費は自社で持つ
  • ひとつのサービスにコミットし、よりエンドユーザーの近くで開発ができる。

紙とWEBは違う

webと紙の共通点は「読む」「見る」ということ。
視覚的に情報を得るということ。

紙の特徴

  • 環境に依存しない / 修正に時間がかかる
  • 文字の大小の差が大きくてもいい
  • 自由なレイアウトが組める / じっくり読む / CMYK

WEBの特徴

  • 環境に依存する / 修正がすぐできる / 字が小さすぎると読めない
  • 音やバイブなどさまざまな表現手法がある
  • ななめ読みされる / RGB

短納期タスクにおける近道について

仕事では作業時間は限られている
迷路の問題
小難しいことは後回しにして、
とりあえず目的だけは必ず達成させる
目的を達成させるための解決法はいくらでもある
自分の引き出しを増やすこと

自分で自分をメンテナンス

プロになってからのほうが気が遠くなるぐらい道が長い
常に情報収集をして自分をスキルアップさせていく

コーディング作業において目指すところ

PSDを正しく反映しながら、
HTML/CSS/Javascript の特性を生かした
ユーザー視点のWEBページの制作をする
ブラウザ間での差異をなるべく小さくする
慣れてきたら、「何かを解決するためのコーディング」を目指す

HTMLについて

★htmlとは

Hyper Text Markup Language
色々と テキストを マークアップできる 言語

★xhtmlとは

Extensible Hyper Text Markup Language
めっちゃ 色々と テキストを マークアップできる 言語

以前はメモ帳のような
単純なテキストのやりとりをしていた。

htmlとそれを表示するブラウザの出現によって
テキストファイルを色々な形に表現できるようになった。

普段目にするWEBページとは

HTMLとCSSなどを組み合わせたもの。
HTML=体、CSS=服

Firefoxを起動→表示→
スタイルシート→スタイルシートを使用しない

としたときに見えるのが、ページの本体(HTML)。

まずはHTMLを正しく書けるようになり、
次にCSSで色をつけたりレイアウトしたりする。

次回の記事ではHTMLを正しく書く練習に進みます。