スタッフ厳選おすすめ情報

デザイン

おすすめ情報

2016年7月25日

企業への求人応募をご検討中の方、是非ご一読を!

mainv-read-the-direction-of-you-considering-a-job-application

別の会社に転職したい!
Webデザイナーとして就職したい!
と思っているそこのあなたへ。

最近は弊社Webデザイナー職にもたくさんのご応募をいただいておりますが
デザイン部の採用担当として、どんな会社を受けるにあたっても、
是非ここは気をつけていただきたい、という点をお伝えします。

デザイナー職に限らず、あらゆる職種にわたって、
採用応募の際には参考になることも多いと思うので、
これから企業へ応募をされる予定がある方は、
是非ご一読ください。

1 応募メールや履歴書の志望動機欄には、
「御社を選んだ理由」を必ず記載すること。

履歴書
何通か履歴書に目を通す中で、
やはり定型文のようなものはよくあり、
読む側としてもさらっと流してしまいがちです。

また、そういった文章を書く方に限って、
複数の会社への応募されているケースが多いです。

文才が無くても、別に長く無くてもいいので、
「私は、こういった理由で御社を志望しました」
といった、内容が欲しいのです。

よく「志望動機」を書かれる方もいらっしゃいますが、
この二つは似て非なるもので、簡単に言い換えれば、
「他の会社への履歴書に記載しても通用する内容か」
と言えるのではないでしょうか。

採用担当からすれば、自社に興味を持ってくれているか否かで
だいぶ応募者への気持ちは違います。

恋愛に例えると分かりやすいかもしれませんね。
「あなたのここが大好きです!付き合ってください!」
とアピールされるのと、
「あなたのことはほとんど知りませんが、お付き合いして下さい!」
とアピールされるのでは、
普通の感覚の人なら、前者の方が
より好感度が増して好きになりやすい、ですよね?
違ったらすみません…。

さて、話を戻して。

2 面接に臨む前に、会社のことをしっかり調べて、
自分から聞きたい質問もいくつかピックアップしておこう。

面接

書類選考を無事突破したら、面接は書類選考以上に気構えてください。
自己PRももちろん大切ですが、会話のキャッチボールとなる
面接官とのやりとりは、それ以上に重要といっても過言ではありません。

たった数分の短い時間の中で、コミュニケーション能力も測られるからです。
頭が真っ白になった!なんて事態に陥らないためにも、
スムーズな受け答えができるよう、自分のことはもちろん、
会社のこともしっかり下調べしておきましょう。

会社のWebサイトやブログは、会社や社長の理念や、
会社全体や従業員の雰囲気が伝わりやすく、
是非目を通して欲しいページと言えます。

面接官からの予期せぬ質問に、
事前に会社の情報に目を通していたか否かでは
答えられる内容もだいぶ違うと思います。

自己PR、面接官からの質問まで終わったら、
いよいよ今度はあなたらからの質問のターンです。

意外ですが、多数の採用担当がこの、応募者からの
質問タイムを重視しています。
どんな質問がでるのか?
Webサイトを見れば済むような質問であれば、
本当に興味があって会社のWebサイトを見てきたのだろうか?
と色々な指標になるからです。

質問の内容もとても重要です。
その人がどういった類の質問を投げかけてくるかで、
働く上で何を一番重視したいかが一目瞭然だからです。

入ってから「聞いてなかった」とならないよう、
ぼんやりとしている福利厚生や、就業規則があれば
質問として投げかけましょう。

ただ、ひとつ注意して欲しいのですが、
「残業はありますか?月何時間くらいですか?
その場合残業代はきちんとでますか?」
といったマイナスな質問を深く掘り下げてしてしまうと、
面接官としても、「本当に熱心に働く意欲があるんだろうか?」
と心配になってしまうものです。
当たり前といえば当たり前ですが…。
労働者としてとてもしっかり確認しておきたい大切な面は
みなさんそれぞれあると思いますが、
そういった内容は、面接で聞くとしてもできるだけソフトに、
難しそうならメールでの確認にとどめるなど、
悪い印象を与えないようにしましょう。

3 自分の長所も短所も、素直に伝えよう

書類選考も面接も、自信のない人ほど
自分を大きく見せようとしがちです。
あなたには長所があれば、もちろん短所もあります。
きちんと両方を把握できていてこそ、
自分を客観的に見られる、よい人材とも捉えられます。

長所をアピールすることはとてもいいことですが、
きちんと短所も伝えた上で、その短所を
そうカバーしているか、といった改善策も
合わせて伝えられるとベストですね。

4 前職(現職)の不満を漏らさないようにしよう

中途採用の面接では、必ずと言っていいほど
「なぜ今の会社(前の会社)を辞めたい(辞めた)のか?」
という質問を投げかけられます。
この質問こそ、応募者の価値基準を推し量る、
最重要な質問とも言えます。
ここで前の会社の悪口を言う人は採用しづらいとも言えます。
なぜなら、「その不満を改善するよう、コミュニケーションをはかったり、
要望を伝えたり、十分な勉強をしたりしなかったのか?」
と捉えてしまうからです。

「自分がうまくいかないのは会社のせい、
だから自分の行動ではなく会社を変えてやる」という
責任を会社に押し付ける辞め方をしていると、
不満をにじませる回答になりがちです。

こういった人は、ほぼ必ずといっていいほど、
自社で採用しても、不平不満を漏らすケースが多いです。

確かに転職というのはなんらかの不満が結晶化し、
行動にうつすものというのはよくわかります。
が、不満を漏らす前に、きちんとその問題に立ち向かえ、
そしてどうしてもだめだったから転職を考えている、
という人材に会社は惹かれるものです。

「前の会社には多大なる恩を感じています」と
胸を張ってどうどうと言えるくらいの意気込みで、
面接には臨みましょう。

Webデザイナー職に応募する前に

man
さて、ここからはWebデザイナー職を希望される方へ
ご一読いただきたい内容になります。

1 ポートフォリオの提出

まず、一番大切にしていただきたいのが、
ポートフォリオの提出です。

やはり、応募者本人のデザイン力を
一目で把握できるのがポートフォリオなので、
そこから興味を惹かせるよう、
十二分にもこだわって、ポートフォリオはつくり込みましょう。

サイトでも、紙媒体でも構いませんが、
Webデザイナー職を希望するなら、
できることならポートフォリオサイトでの提出が望ましいですね。
HTMLの知識が乏しくても、
調べつつ作った、という意欲は買えるので、
是非トライしていただきたいです。

2 ポートフォリを全体を通して

また、ポートフォリオでは自分らしさを思い切り出してください。
ぱっと見て、「お?」と目に留まれば
企業側は自己紹介文などを読み込みます。
デザインの良し悪しは一瞬で判断できるので、
決して手は抜かないでください。

自己紹介文は、短く、単的にまとめましょう。
ポートフォリオ内での長文は読み飛ばされやすいです。
アピールしたい内容は、別途履歴書に記載するのが無難です。

また、得意なジャンルで勝負してください。
がんばったという意欲は素晴らしいと思いますが、
多岐に渡らせたあまり中途半端になってしまった
作品集を見せらせるより、
一部に特化してクオリティの高い作品集という方が
断然高評価です。
自分の得意なジャンルで勝負してください。

3 ポートフォリオに掲載する作品数

ポートフォリオは、形だけあればいいのではありません。
中身こそ重要です。
どういった作品を、どれだけ載せられるかに
勝負はかかっています。
デザイン学校を卒業しているなら、
ある程度の作品数はあるかもしれませんが、
採用担当としては、授業以外で
どれくらいデザインを手がけているか、
という点も重視したいところです。

やはり、デザインが好きで仕方ない!
という方はそもそもの作品数も雲泥の差ですし、
そこはできる限り多く掲載していただきたいですね。

ただし、点数稼ぎのためといって、
工事中のページや、未完成の作品は掲載しないよう、
注意して下さい。
どうしても足りなければ、少ないコンテンツで
いかに魅力的に見せるか、
レイアウト力で勝負しましょう。

4 Web以外の作品も載せよう

採用担当としては、Webサイトだけでなく、
応募者個人がどれくらいクリエイターとしての
素質があるのかも見たいところです。
イラストや映像作品など、Webには関係のなさそうなものも
自信がある作品なら是非掲載しましょう。
ただし、載せすぎは
「本当にWebデザイナーになりたいんだろうか…」
と思われてしまいがちなので、
掲載点数のバランスは重視しましょう。

5 掲載作品について

せっかく作品を厳選して掲載するのですから
その作品の詳細や背景なども、簡潔明瞭に載せたいものです。

  • デザインのキャプチャや写真
  • URL
  • 制作期間
  • 使用ソフトや素材
  • 共同作品の場合はどこを担当したか具体的に記載
  • テーマやコンセプト

など記載できれば、充分でしょう。
長々書きすぎると、読み飛ばされやすいので注意してください。

余談:筆者の場合

脱線しますが、筆者の場合、新卒の頃と中途の頃で、
採用への応募にあたっては、複数回ポートフフォリオを作っています。
学生時代どっぷりと美術やデザインに浸かっておりましたので、
作品数はかなりたまっていましたが、新卒の頃は
Webの作品数はそのなかでも1割にも満ちませんでした。

だいぶ厳選はしましたが、それでも
A3クリアファイルがパンパンになるくらい
たくさんの作品を詰め込んだ結果、
掲載点数は100点をゆうに超えていました。

それはそれで、見る側は飽きるよな…
と今になっては気恥ずかしい思い出ですが、
無事前職で採用していただけた時には、
上の方から、「ポートフォリオ見たよ、期待してるよ」
と言われ、嬉しくなったと同時に、
たかがポートフォリオ、されどポートフォリオと、
しみじみ実感したのを覚えています。

中途の時は、
よりWebサイトのみに特化して
ポートフォリオを作り直しましたので、
ポートフォリオとしての構成は荒削りでしたが、
自分のなかでクオリティを保てていると推せる作品たちで
勝負ができたと思っています。

が、やはりポートフォリオというものは、
過去の作品を載せるものなので、
見返せばどんなものでも
だいぶ気恥ずかしいものではありますが・・・。

まとめ

bill
いかがでしたか?
これから求人に応募される方の参考に少しでもなれば幸いです。
ポートフォリオを作られる予定のあるデザイナーの方は、
是非「自信を持って見せられる!」と太鼓判がおせるくらいに
クオリティと自分らしさを追求して、
素晴らしい1冊を作り上げてくださいね。

おすすめ情報

2016年5月31日

Webフォントを使って、ワンランク上のサイト作りを!

Webフォントを使って、ワンランク上のサイト作りを!

Webデザイナーの方なら、MS Pゴシックやヒラギノ角ゴシックなどから
一歩踏み込んだフォントでWebを作りたいと思いますよね。

従来のフォントだと選択肢が制限されていましたが、
CSS3からはWebフォントが利用できるようになっています。

元来、Webブラウザは端末にインストールされているフォントを呼び出し
文字を表示します。

端末のフォントでは、Webデザイナーが意図しないWeb表示がなされてしまい、
フォントに関するWebデザインにも制約が生じてしまいますよね。

フォントを画像にして表示するという手はありましたが、
文章修正のメンテナンス、文章の検索、SEO面で問題があります。

そこでWebサーバー上にフォントファイルを置き、
Webデザイナーの意図するフォントを表示できるようにした技術がWebフォントと言えます。

従来のフォント指定について

OSごとに標準搭載されているフォントを見てみましょう。

Windows 8 / 7 / Vista メイリオ
MS ゴシック
MS 明朝
Windows XP MS ゴシック
MS 明朝

MacOS X 10.5以降

ヒラギノ角ゴシック ProN
ヒラギノ明朝 ProN
ヒラギノ角ゴシック Pro
ヒラギノ明朝 Pro
MacOS X 10.4 ヒラギノ角ゴシック Pro
ヒラギノ明朝 Pro
iOS HiraKakuProN-W3
HiraMinProN-W3
Android 4.0 モトヤLシーダ3等幅
モトヤLマルベリ3等幅

制作時にフォントにこだわって、多彩なフォントを自由に使ったとしても、
エンドユーザーのPCにフォントのデータが無いため表示が変わってしまい、
意図しない表示がされ、残念な結果になってしまうことが多々あります。

この問題の解決手段として策定されたのがWebフォントです。

フォントのデータをネットワーク上に置き、
サイト表示の際はそこからフォントのデータをダウンロードして使用するため、
ユーザーの環境に左右されることが無くなります。

改めて、Webフォントのメリット、デメリット

Webフォントを使用するメリット

  • ユーザーの環境に依存せず、インストールされていないフォントも表示できる。
  • 画像ではなくテキストなので、検索エンジンのクローラーに情報を拾ってもらえ、SEOに有利。
  • 修正、更新がテキスト打ち直しだけなので簡単。
    Photoshopなどのアプリケーションに頼らなくていい。
  • Retinaなどの高解像度ディスプレイでも綺麗に見える。
  • レスポンシブ対応が容易。

Webフォントを使用するデメリット

  • Webフォントのデータを読み込むための時間がかかる。
  • 無料の日本語Webフォントは種類が少ない。
  • 日本語Webフォントは欧文のみのものに比べて重い。
    ※容量を削減するために、必要な文字のみを読み込む「サブセット化」で
    フォントファイル自体を軽量化することも可能です。

Webフォントは敷居が高そう、、とお思いの方に

Webフォントは難しいと思われがちですが、きちんとした手順を踏めば、
さくっと導入できます。

これを期に、フォントからサイトの雰囲気を変えていきましょう!

欧文の所はおしゃれにしたいなら、Google Fontsがおすすめ!

必要なフォントを選んで、出力されたタグをコピペするだけで、
欧文Webフォントが使用できます!

日本語はありませんが、欧文書体が幅をきかせているため、
欧文のタイトルに使いたいなどであれば、こちらの方法が手軽です。

google font

google font

日本語のWebフォントは??

Google Fontsで調べるとわかりますが、全て欧文対応のものです。残念です…。

が、日本語Webフォントとして、Googleが提供している日本語のWebフォント、
Noto Sans Japaneseが『Google Noto Fonts』というプロジェクトで無料で公開されています。

Noto Sans CJK JP

Noto Fonts CJK JPとは、Googleとadobeが共同開発をしたフォントです。

コンピューターで表示できない文字がある場合、
文字の代わりに小さい四角(□)が表示されることが多いですが、
Googleではそれを「豆腐」と呼んでおり、
Webから取り除くためにNoto(no more tofu)フォントを作ったそうです。

さすが、GoogleとAdobeが共同開発したフォントだけあって、
すっきり整っていて、よみやすさ抜群です。

困ったらNoto Sans Japanese、と思っても間違いではありません。

Noto Sans Japaneseを簡単に導入

CSSファイルに、以下のようにインポート文を追加すれば、
urlに指定されているCSSファイル経由でNoto Sans Japaneseを読み込みます。

@import url(http://fonts.googleapis.com/earlyaccess/notosansjapanese.css);

これだけで、あらゆる端末で同じフォントを、
しかも日本語で使えるようになるのです。
素敵ですね。

Noto Sans Japaneseをより軽く使用するため、サブセット化する

先ほどの方法でももちろん大丈夫ですが、
全ての漢字やウェイトなどを網羅しているため、少し重くなりがちです。

表示が重たくてストレスを与えてしまう、という事態を回避するため、
フォントファイルを軽量化させてしまいましょう。

1.「Noto Sans」をダウンロード

「Noto Sans」をNoto Sans CJK JP よりダウンロードします。

Noto Sans CJK JPを検索、ファイルをダウンロードしてください。
noto font

2.サブセット化のためのソフトをインストール

下記のサイトから「サブセットフォントメーカー」「woffコンバーター」を
インストールください。

http://opentype.jp/subsetfontmk.htm

http://www.forest.impress.co.jp/library/software/woffconvert/

3.サブセット化してWebフォントのファイルサイズを軽量化

サブセット化とは、普段使うものだけを抜き出す作業です。

「第一水準漢字+ひらがな+記号」この辺りを抜き出せば
普通のwebサイトであれば十分です。

以下から、代表的なフォントに格納する文字です。

https://drive.google.com/file/d/0Bza38quoCtHqM004SE1QUVlNLWc/view

1. サブセットフォントメーカーを起動し、インストールしたファイルを指定します。

サブセット

2.「作成後フォントファイル」で軽量化したあとのフォントファイルの保存場所を指定します。

3.「フォントに格納する文字」の箇所へ、先ほどダウンロードした文字をコピペします

4.「作成後、WOFFコンバーターを起動する」にチェックを入れて、「作成開始」ボタンをクリック。

5. 変換後のフォントファイルが1MB以下になっていることを確認してください。

4.woffコンバーターを使用し、拡張子をwoffに変換

フォントにもそれぞれの環境で対応したファイル形式があるので、それぞれ変換してやります。

先ほどのサブセットフォントメーカーできちんと変換されていれば、
そのままwoffコンバーターが立ち上がります。

サブセット

1.「変換前ファイル」でさきほど軽量化したフォントを指定します。

2.「変換後ファイル」で拡張子を変更した後のファイル名を指定します。

3.「EOTファイルを生成する」にチェックを入れて、「変換開始」をクリック。
※EOTファイルはIEでも表示させるためのフォントファイルです。

5.サイトに日本語Webフォントをインストール

これで日本語Webフォントのサブセット化は完了しました。

あとはサイトに日本語Webフォントをインストールすれば表示されます!

軽量化したWebフォントをディレクトリーに配置し、CSSにフォント指定のコードを書きます。

@font-face {
   font-family: "NotoSans";//好きな名前で設定
   font-style: "normal";
   font-weight: 400;
   src: url("./assets/fonts/NotoSansCJKjp-Regular.otf") format("opentype"),
   url("./assets/fonts/NotoSansCJKjp-Regular.woff") format("woff");  
}

太字を使いたい場合は、font-family: "NotoSansCJKSC;と指定すると使うことができます。

@font-face {
   font-family: "NotoSans";
   font-style: "normal";
   font-weight: 700; //変更
   src: url("./assets/fonts/NotoSansCJKjp-Bold.otf") format("opentype"), ;
   url("./assets/fonts/NotoSansCJKjp-Bold.woff") format("woff");  
}

このサブセット化の方法を覚えれば、Web上に転がっている商用可などの日本語フォントを、
ストレスフリーにサイトに導入できます!

ぜひ覚えてくださいね。

まとめ

いかがでしたか?Webのフォントは紙媒体に比べて遊べない、とお思いのあなた。

技術の進歩でWebフォントも捨てたもんじゃなくなってきています!

ぜひワンランク上のサイトデザインに、ご活用ください。

おすすめ情報

2016年4月27日

スマホ最適化、よりよい手段、とれていますか?

Googleは2015年4月21日からスマホ最適化(モバイルフレンドリー)していないページは
これまでよりも検索順位が下がったり、上がらない恐れがあると公表しています。

これを踏まえて、スマホで閲覧したとき、従来のPC表示はだいぶ古い、のはみなさんご存知でしょう。

スマホ最適化の方法の中でGoogleが最も推奨しているのが、レスポンシブ・ウェブデザインです。

1. レスポンシブ・ウェブデザイン

「レスポンシブwebデザイン」とはどういう手法かというと、
デバイスをwebサイト表示の判断基準にするのではなく、
ブラウザの横幅サイズをwebサイト表示の判断基準にし、
ページのレイアウトデザインを柔軟に調整できる手法です。

現在一般的には、デバイス毎のレイアウトが違うHTMLファイルを
複数用意することが多いと思いますが、
「レスポンシブwebデザイン」では、1つのHTMLファイルを、
CSS3(Media Queries)で制御し、ブラウザの横幅サイズに応じて

ページのレイアウトデザインを調整できます。

レスポンシブ・ウェブデザインのメリット

1.PCサイトのコンテンツや素材が使い回せる

2.コンテンツを一元管理できるので、運用コストがかからない

3.URLが統一されるのでシェアしやすくなる

レスポンシブ・ウェブデザインのデメリット

1.jsやcssが多くなるため、サイトの表示速度に影響がある

2.デザインやレイアウトの融通が効かない

3.PCのユーザー導線を引き継ぐので、スマホならではの導線設計が難しい

4.スマホからPCサイトを見たい場合に容易には見れない

2. スマホ専用コンテンツを作成

スマホ最適化のもう1つの方法が、デバイス毎にWebサイトを用意する方法です。

PC用サイトとスマホ用サイトを用意する場合、
ユーザが閲覧しているOSやブラウザ(ユーザーエージェント)を判別して、
サーバーサイドプログラムで表示するHTMLを振り分けるという手法が一般的な方法です。

PCサイトのURLを「www.aaa.com」とした場合、モバイルサイトでは
「www.aaa.com/sp/」のようにディレクトリを切る、もしくは「www.sp.aaa.com」
のようにサブドメインを設定するのが一般的な方法です。

スマホ専用コンテンツのメリット

1.スマートフォンサイト、PCサイト別々の設計が可能

2.デザインやレイアウトの融通が可能

3.サイトの表示速度をレスポンシブサイトよりも調整しやすい

スマホ専用コンテンツのデメリット

1.PCサイトとスマートフォンサイト両方の素材やコンテンツの用意が必要

2.運用コストが上がる可能性がある

3.URLが統一されない為、スマホからとPCからSNS上にシェアされた際に違うURLとなる。

以上を踏まえると…?

それぞれメリットデメリットはありますが、
Googleが明確な検索アルゴリズムを示した今、

1つのWebサイトで全てのデバイスに対応できるレスポンシブ・ウェブデザインは

大変理にかなった手法と言えます。

これからスマホサイトを作っていくのであれば、
メリットデメリットを加味した上で、選択していってください。

次に、マルチデバイスに対応していくために、最低限知っておきたい、

Googleが提唱しているスマホ最適化25のルールをご紹介します。

Googleが提唱しているスマホ最適化25のルール

1.CTAに一番目がいくようにする

サイトの中でも最も重要なCTAボタン(「会員登録」や「無料お試し」など)は、
ファーストビューやサイトの中心など、必ずユーザーの目に留まる位置に設置します。

2.ナビゲーションは簡潔明瞭に

モバイルにおいては、ナビゲーションのリスト数は最小限に留めましょう。

最近流行りのタップでナビがプルダウンしたりスライドしてくる、
トグルナビでのボタンのみの表示もオススメです。

3.ユーザーに優しいトップページ回帰

モバイルユーザーはヘッダーのロゴをタップした時にリンクが設置されていないと、
大きなストレスになるとの調査結果が出ています。
最低限、ヘッダーにはロゴ必須、フッターにもできれば入れて、
どちらもトップページへリンクするようにしましょう。

4.プロモーションはほどほどに

プロモーションや広告がCTRボタンに隣接している場合、ユーザーの気が反れ、
コンバージョンに繋がりにくくなります。

プロモーションのしすぎでユーザーの気をそらしていないか、今一度確認しましょう。

5.サイト内検索でユーザーを逃さない

目的が明確なユーザーはサイト内検索の利用頻度が高い傾向にあります。

最もコンバージョンに近いユーザーを逃さない為に、
サイト内検索バーは必ず設け、分かりやすい位置に設置しましょう。

6.最高の検索体験の提供

モバイルユーザーは、デスクトップユーザーよりも断然、
不必要なアクション、目的に到達出来ないままの複数ページ回遊等を嫌います。

①1ページ目に表示される結果と検索キーワードの関連性

②オートコンプリート

③誤字脱字の自動訂正

など、ユーザーにストレスを感じさせない、最高の検索体験を提供しましょう。

7.詳細検索機能の最適化

詳細検索機能でのイライラは、以下のケースで起こりえます。

①絞ったはずが検索結果がいっこうに減らない、
②絞った結果検索結果が0件になった
単に詳細検索機能を設置して終わりではなく、ソートの方法も都度見直していきましょう。

8.検索はフォーム入力前にスタートしている

カスタマー層が多岐にわたる場合や、商品数が圧倒的に多い場合には、
トップページのナビゲーションなどで、性別、欲しい商品のカテゴリ
(トップス、ボトムなどの大カテゴリ)、サイズなど、
2~3の質問を事前にリサーチ、反映させましょう。

その後のキーワード検索体験が、より心地いいものになります。

9.コンバージョンを急かさない

サイトに訪問したユーザーに購入や予約等のコンバージョン関連タスクをいち早く求めるのは、
多くの場合CVRを押し下げる原因となります。

初めて入ってきたユーザーには、吟味してコンバジョーンにたどり着けるサイト設計を心がけましょう。

10.会員登録無しで購入

購入したい!と至ったユーザーに対しても、会員登録必須となると
購入意欲が減退するという調査結果が報告されています。

初回購入ユーザーのためにも、「会員登録無しで購入」というオプションは
設けておくと親切です。

11.手元にある情報を最大限活用

ユーザーが登録を嫌がる理由の1つは、情報入力に手間がかかると、
ユーザーが登録を嫌がる傾向にあります。

登録済みユーザーには、同じ情報を度々入力させることの無いようにオートフィル機能を。

新規ユーザーには、登録の手間を大幅に削減する決済サービスを導入するなどして、
情報入力を手間取らせないようにしましょう。

12.クリック・トゥ・コール

複雑な情報や機密性の高い情報を取り扱う際には、
クリック1つで電話がかかるクリック・トゥ・コールボタンを設置し、
ユーザーに不信感を与えないようにしましょう。

ネットセキュリティに対する意識が高い現代において、逆行するようで意外ですが、

電話での登録の方が安心出来るというユーザーが非常に多いようです。

13.一手先を見越す

たとえ購入意欲がピークに達しても、時間の関係などによって
その時はコンバージョンまで辿りつかないケースが多々あります。

そんなユーザーでも時間の余裕があるタイミングで後々購入に踏み切れるように、
「買い物かごに入れる」「SNSでシェア」「メールで送る」などのオプションを用意し、
できれば「お買い忘れはありませんか?」などのアクションをこちらから取れると
ベストですね。

14.入力プロセスの最適化

スマホにおける文字入力は、デスクトップユーザーのそれよりも
大きく「面倒だ!」といん印象をユーザーに与えます。

「登録要項はこれ以上減らせない」という時でも、

①リターンを押すと次の項目に自動で移動

②番号入フォームには自動でナンバーキーボードを表示させる

など、プロセスに存在する無駄を徹底的に省きましょう。

15.入力メソッドの最適化

各入力項目に対して、最適なインプットメソッドが適用されているか、確認しましょう。

例えば年月日であれば年、月、日と別々に登録するのではなく、
一括で設定出来ればユーザーに苦労を感じさせません。

16.カレンダーのビジュアル化

特に予約商品を扱うサイトの場合、必ずカレンダーは数字だけでなく、
ビジュアルで見せるようにしましょう。

カレンダーアプリの起動でサイトを離脱し、
せっかくのコンバージョンを逃すケースも考えられます。

17.入力エラー対策

1つの項目の入力エラーによってその他全ての入力データが消えてしまう、
なんてことをさせないようにしましょう。

各項目に明確なラベル(「PW」ではなく、「8文字以上のパスワード」など)を
張ることはもちろん、エラーを確認するとその場で通知するオート・バリデーション、
そして、万が一更新しても入力データをしっかりと保存してあげるなど、
入力エラーによるフラストレーションを極限まで下げるよう取り組みましょう。

18.エコと予測可能性

設計としては多く盛り込みたいところですが、入力項目は最小限に抑えましょう。

オートフィルを使って項目の手間を省ける場合(例えば郵便番号)には、
必ず利用し、どうしても数が減らせない場合には、
入力をいくつかのステップに分け、各ステップ及びその進捗状況を表示し、
ユーザーに現時点での立ち位置を把握させることが重要です。

終わりの見えない工程よりも、ゴールを明確にする方が、ユーザーを逃しません。

19.サイト全体をスマホに最適化

一部のみスマホ対応、それ以外はPC表示のまま、
という中途半端「混合型」のウェブサイトは、
かえってモバイルユーザーのUXを悪化させるという結果が出ており、
サイト全体をスマホに最適化させることが重要です。

20.ノー・モア・ピンチ

モバイルユーザーは、画面をつまんで(ピンチ)ズームアウト・インすることに
嫌気が差しています。

イライラを助長するだけでなく、ズームの過程でCTRボタンを
見逃している可能性も多く調査の中で指摘され、「ノー・モア・ピンチ」、
ズームアウトやズームインの必要の無いウェブサイトの制作を最優先させましょう。

21.画像の拡大

単純に画像を掲載するだけでは、ユーザーの購買意欲を最大化することは出来ません。

特にアパレル製品に関しては、
高画質な画像を拡大して閲覧出来るように表示するだけで、
ユーザーがより多くの情報を得られ、
結果としてコンバージョンの向上につながりやすくなります。

22.オリエンテーションの最適化

情報量が多く、通常の縦位置ではなく横画面での閲覧が最適な場合には、
ユーザーにポップアップでお知らせしてあげましょう。

一度に表示される情報量が増加し、
ユーザーにとってみれば大きなストレス解消ポイントにもなり得ます。

23.1画面にキープ

複数ウィンドウにまたがる操作は、ユーザーが本体サイトから離脱する危険性を高めてしまいます

同サイト内コンテンツを別ウィンドウで開くボタンの設置を避けることはもちろん、
ユーザーが他のウィンドウを開いて更に安い情報を探しに行くことのないように、
単一ウィンドウ内にクーポンや比較情報を設置しましょう。

24.「フルサイト」の表示はNG

モバイルサイトでよく、「フルサイトはこちら」といった文言を見たことはありませんか?

ユーザーが「モバイルサイト」と「フルサイト(PC版)」の2つのチョイスを与えられた際、
ユーザーは「モバイルサイトは情報がぎゅうぎゅうに詰められて見づらい」、
「フルサイトの方が(実際にそうではないが)たくさん情報が入っている」
と言った印象を覚えるようです。

「フルサイト」ではなく、「PC版」や「デスクトップ版」
といった表現で誤解を減らしましょう。

25.位置情報取得は慎重に

ユーザーの利用状況を理解する前に位置情報を取得し、
その情報に基づいたコンテンツを推奨するのは単なるおせっかいです。

あくまで位置情報はユーザー自身が入力することを前提に、
「地域限定情報をチェック」といったようなCTRボタンを用意しておくのが
効果的と言えるでしょう。

まとめ

SEOを狙うスマホ対応、どれだけ重要かがおわかりいただけたかと思います。

これからスマホ最適化させていかないといけないWeb担当者のみなさま、
選択可能であればGoogleのアルゴリズムにより強いレスポンシブ対応を選び、
Googleが提唱しているスマホ最適化25のルールをできるだけ遵守し、
UX(User Experience:ユーザエクスペリエンス…
ユーザが特定のサービスを使ったときに得られる経験や満足など全体を指す)
を高めていけるよう、最大限努力しましょう。

おすすめ情報

2015年11月10日

今のWebデザイナーに求められているのは?

BIgmac中谷蓉織です

はじめまして。

Bigmacに10月から入社しました、中谷といいます。

以降お見知りおきのほど、よろしくお願いします。

まずは簡単に自己紹介から。

前々職は福井の制作会社でWebデザイナーとして経験を積み、

出産を機にフリーランスとして数年、個人でお仕事していました。

特にフリーランスとして実績を積んでいく中で、

自分の力だけではできないこと、知識が及ばないことにぶち当たることが多く、

何よりマーケティングの知識が圧倒的に足りていなかったため、

ここBigmacで、マーケティングに強いWebデザイナーになろうと決意し、今に至ります。

 

今のWebデザイナーに求められていることは何だろう?

その過程で、「今のWebデザイナーに求められているのは?」

といった自問自答を繰り返すことが多くなりました。

デザイナーのひとりよがりではなく、顧客はもちろん、

何よりもエンドユーザーに配慮したものを提供していきたい。

どうせデザイナーと名乗るなら、満足度の高いWebを作りたい。

その一心でここまでずっと来ています。

 

Webデザイナーにもマーケティング知識が必要な時代

そのためには、いちWebデザイナーにもマーケティングの知識が不可欠となってきます。

マーケティングの理解なしには、キレイなWebデザインは作り出せても、

デザインの目的に付随した本当のWebデザインはできないと言っていいです。

ネットサーフィンをしていると、時たまぶつかりますよね。

説得力のないキレイなだけのサイト。

そういうWebサイトしか作れないと、

やっぱり次世代を担っていくWebデザイナーとしてはやっていけません。

「自分が好きな配色だから」「デザインの黄金比なら余白はこのくらい」などではなくて、

「年齢層の高い女性向けのサイトだから、配色は落ち着いたトーンで明朝体」

「ビジネスマン向けLPで強い訴求でいきたいから、角丸グラデではなく原色フラットで」

など、ビジネス目線からデザインの意図・目的を掘り下げていくことが大切です。

マーケティングで言う「ペルソナ」、つまり

「企業が提供する製品・サービスにとって、もっとも重要で象徴的なユーザーモデル」

をターゲットとして、いかに説得力のあるデザインを提供できるかが鍵ですね。

 

作って終わりでなく、運用にまで考慮したWebサイト制作の重要性

そうすると、作って終わりのWebサイトではなく、

運用にまで目を向けたWebサイト制作ができるようになってきます。

その上で、キレイなデザインへの探究心や

作業効率化への施策を打ち出せるようになっていけば言うことなしです。

基本的なWebデザイナーとしてのスキルを積んで、なにか物足りない…とぶち当たっている方。

マーケティングに目を向けて改善・提案ができるようになっていけば、

あなたはもう企業にとって、なくてはならない人材になります。

photoshopでデザインだけできるデザイナーや、

Dreamweaverでコーディングだけできるコーダー、

どちらもできてもイマイチ成果を出せないマークアップエンジニア。

言われたことだけをこなすだけの作業員で終わらないためにも、

この先求められる次世代のWebデザインを担っていく皆様、

マーケティングにも目を向けて、「考える」Webデザイナーを目指しましょう!

中谷も、少しづつではありますが、

Webデザイナーとしての高みに1日でも早く近づけるよう、

Bigmacのスタッフの皆さんのお力をお借りして、日々頑張ります!

どうぞあたたかい目でお見守りください。

最後までお読み頂き、ありがとうございました。

1 2 3 4 5