5K note

仙台在住Webデザイナーの日々の備忘録

Webメディアのサイト名は考えて決めない方がよい

若干挑発的なタイトルになってますが、先日コンテンツサイトの運用担当者の方と、仕事の打ち合わせでお会いしました。その方との話した中で、Webメディアのサイト名の決め方について、興味深い話を聞けたので皆さまにも紹介したいと思います。

なお前提条件として、今回お話を伺った方は企業の課題解決型のコンテンツサイトを運用している方の意見であり、全てのWebメディアに通じる内容ではない事をご留意ください。

サイト名は考えて決めない方がよい

新たにWebメディアを作るとき、どんなサイト名にするか熟考して決める方もいるかと思います。後からいくらでも編集が可能なWebメディアといえども、サイト名は一度決めたら基本的にそれを使い続ける訳ですから、作り手としては色々な想いを込めたタイトルにしようとしがちです。

ですが、ユーザーにとって訪れたサイトは「数多のWebメディアのうちの一つ」でしかありません。例えば、Googleで調べ物をする際、検索結果に出たWebメディアを読んだ人で、そのサイトの名前を覚えている人はいるでしょうか?

ユーザーはWebメディアの記事を読む時、記事のタイトルこそ気にしても、サイト名をいちいち覚えている人は居ないはずです。(サイトに何度も訪れるリピーターは除く)

そんな中でサイト名に拘るだけ時間の無駄ですし、凝った名前というのは作り手の創作性が発揮されたオリジナリティ溢れる名前になりやすいため、結果的に検索で引っかかりにくくなり、Webメディアの中身がユーザーに届かない可能性も出てきます。本末転倒ですね。

ではどうやってサイト名を決めれば良いのか?

答えはシンプルです。SEOを意識し、検索されやすいワードを集めてタイトルを作るべき」 とのこと。

今回話した担当者の方の場合は、ユーザーは商品に対する悩みをどのようなワードで検索されているかを調査した上で、よく検索されている2、3ワードを組み合わせてサイトのタイトルとし、そこに入りきらなかったワードはサイトのdescription(説明文)の中にうまく散らばるよう文章を作って入れている、と話していました。

キーワードを組み合わせてうまく収まるサイト名を考える必要はありますが、想いやビジョンなどは一切含めず、いかに検索ユーザーに目に止めてもらえるか、だけを意識しているとお話されていました。

ちなみに検索を意識する事については下記のエントリでも書いてますが、競合の調査やタイプミスしやすい名前は避けるのが吉です。

http://5k.hateblo.jp/entry/2017/08/23/221220

(リンク先ではブランドイメージや覚えやすさを重視してますが、これはメディアの性質の違いによるものでしょう。暇つぶし系のメディアの場合はリピーターが多いためサイト名で検索してくれますが、課題解決が目的のサイトの場合、直接的な悩みに関するキーワードでユーザーが検索してくるため、その辺の違いなんだと思います。)

まとめ

今回の話で言うなら、本ブログ「5K note」もサイト名としては悪い部類になりますが、アクセス数を追い求めているサイトでは無いですし、何よりも趣味のブログなのでサイト名を変える予定はありません。

ただ、もし仕事でWebメディアを立ち上げようとしている方がいれば、検索を意識してサイト名を考えていけば、より多くの人にコンテンツを届けることができるのではないでしょうか。

パラレルキャリアな職場の先輩に副業について聞いてみた話

前回の更新以降、はてブの更新が1ヶ月近く滞っていたのですが、その間に知り合いから副業の話を持ちかけられ、忙しく動き回っていました。一旦落ち着いたので、少しそのあたりの話を書こうと思います。

どんな副業をやるのか

今回依頼されたのは、私の地元にあるホテルのWebサイトのデザインです。仕事でもWeb制作やってるのに休みの日も副業でWebサイトのデザインを作ってるという、中々に頭のおかしい感じですが一口にWeb制作って言っても、サイトの規模によって製作者のやることって全く変わって来るんですよね。

大企業相手の仕事でJimdoやWixを使うことはまず無いですし、小規模な仕事で数千ページの修正作業なども経験することは無いですし。

幸か不幸か、今の職場は副業OK、かつ大企業の案件中心で仕事しており、小規模な仕事の経験が全く積めない環境なので、その辺の経験値を積む為にも引き受けてみることにしました。おかげで休みがほぼ無くなってしまったのですが、しょうがないですよね!

とはいえ、いざ副業が現実的な話になって来ると、色々と不安も多かったので、会社で一回り年上で、かつWebのシステム開発や自前のWebサービスで弊社の給料の何倍も稼いでる先輩がいたので、昼休みにランチしながら、副業の話を相談してみる事にしました。

副業のメリットを聞いてみた

以下、先輩に聞いたWebデザイナーにおける副業のメリットを3つにまとめてみました。

本業の収入が入って来る安心感がある

やっぱり、毎月安定して生活できるお金が入ってくる事の安心感は大きいとのこと。

確かに、一人でサラリーマン並の給料を「安定して」稼ぐのは並大抵ではなさそうですが、生活費+αの分を稼ぐなら、別に金額にこだわる必要はないですからね。もちろん多く貰える方が嬉しいですが

本業の会社ブランドや人脈が活かせる

副業で稼いでるのに、なんで本業をやめないんですか?と聞いたところ、「本職の企業ブランドで仕事が取れる事も多いから、今の仕事は辞めずに副業でやる方が稼げるよ」と言われました。

私や先輩が今いる会社は、東京の割と大規模な会社の地方支店に属しているのですが、取引先が大手企業が多いため、取引先の名前を出すだけで信頼が得られ、システム開発の仕事が貰えるとの話でした。

それって自分の実力じゃなく、会社のブランドに乗っかってるだけじゃん、と言われたら返す言葉も無いのですが、使えるものは全部使う方がよいと思うので積極活用したいと思います。

自分の本業以外の仕事もできる

また、先輩からは「これから数十年先、Web制作だけで食っていけるかわからないから、Webデザインに限らずスキルを伸ばした方がいいよ」と言われました。

私も薄々感じてはいますが「現在のWeb制作」が今後永遠に仕事として存在する事はあり得ないよなー、と感じています。AIやAlexaの台頭はどうなるか分かりませんが、現在でもスマホはほぼアプリだけで事足りる状態ですし、今と同じ仕事スタイルが続く、ということはあり得ないだろうと思います。

先輩いわく、副業をしていたら本業以外のスキルで活かせるものがあるかもしれないし、仮に活かせない場合でも、副業でスキルを身につけるための学ぶ習慣がついているはずなので変化にも柔軟に対応できるはず、という話を聞いて、確かにその通りだなと感じました。副業じゃなくても勉強はできますが、同じ勉強ならお金になる方が嬉しいですし。

まとめ

そのほか、先輩の副業の詳細や、失敗談なども聞けたことで、だいぶ副業への不安が和らぎました。「副業はメリットはあっても、デメリットはほぼ無い。休みがなくなる事以外。」と言ってたので、やるだけやってみたいと思います。

副業通じて何かブログのネタが書けるように慣ればいいなー

ブログ記事に読了時間を入れるスクリプトを作ってみた

タイトルの通り。業務で携わってるサイトの中に「このページは〇分で読めます」的なものをjQueryで作成したので、そのコードを紹介しようと思います。

なぜ読了時間を入れたのか?

たまたまネットサーフィンしていたらこんな記事を発見。(だいぶ古い記事ですが。。)

たった一行追加するだけでサイトの滞在時間を13.8%伸ばす方法・・・

なんか読了時間を入れるとユーザー離脱が減ったり、SNS活用が増えたりするらしいので、入れてみることにしました。

参考サイト

コードは下記のサイトを参考に作成しています。

コピペでOK!はてなブログで記事の読了時間の目安を表示させてみた!

当初はほぼそのまま使用していたのですが、社内のフロントエンジニアに見せたら「これはこう書いた方が良いんじゃないかな」と言われて書き直したのが現在のコードになります。

実装するソースコード

コードは下記の通り。jQueryを読み込んでいるページで下記のコードを記述することで、Webページの読み込みが完了した時に読了時間が表示されます。「.MainText」の所は導入するサイト、ブログの形式に合わせて書き換えてください。

//ページの読み込み完了後に作動
$(window).on('load' ,function(){
    //一分間の読書量を500文字として計算
    var count = 500;
    //「.MainText」内のテキストを抽出し、文字の総数をカウント
    var $length = $('.MainText').text().trim().replace(/[\n\r]/g,'').length;
    //文字総数から一分間の読書量を割り算し、かかる時間を算出
    var min = Math.floor($length / count);
    //読了時間を表示(1分より少ない場合は1分以内として表示)
    var countTime = (min === 0) ? '1分以内' : '約'+ min +'分';
    //読了時間をHTMLタグで作成
    var text = '<p class="countTime">この記事は<span class="countTime-m">' + countTime + '</span>で読み終わります。</p>';
    //「.MainText」の直前に読了時間のタグを挿入
    $('.MainText').before(text);
});

まとめ

現在扱ってるサイトでは改修前後の数週間のアクセスログから、改修の良し悪しを判断しているので、結果がわかったらこの記事にも結果を掲載してみようかと思います。

そして結果がよければうちのブログにも導入してみようかとw

社内のコンテンツマーケの勉強会に参加した備忘録

今日、勤務先でコンテンツマーケティングの会社の人を招いた勉強会がありました。 対象者は「コンテンツマーケティング運用を担当するWebディレクター」ということで、まんま自分のことだったので飛び入りで参加。 色々気づきも得られたので備忘録がてらメモしていきます。

成功するコンテンツマーケティングとは

正しい戦略と打ち手

闇雲にコンテンツを作るのはNGで、目的に応じたコンテンツ・マーケティング戦略を実行していくのが大事。

十分なオーディエンス

そのメディアにユーザーが少ないと、いくらサイト・コンテンツを改修しても意味がない。

データが第一

サイトのブランドイメージやユーザーの心理を作り手が勝手に想像せず、データから戦略を導くのが大事。

ブランディングも大事

①〜③までは出来ている前提で、最終的にはサイトのブランドが長期的なLTVを高める

コンテンツマーケの強み

バイスが変わってもコンテンツを持つ強みは変わらないため、今後スマホ以外のデバイスが台頭した時も、コンテンツを持つ企業は時代の変化にも強い。

ニッチな検索クエリを独占する

「どんな人が、どんな悩みを抱え、どんな答えを求めているか」というマッチングデータを蓄積して行くことで、ゆくゆくはそこから大きな価値が生まれる。そのため、最初はニッチで規模の小さいコンテンツでも、スモールスタートしていき、徐々に規模を大きくしていくのが大事。

これからの時代のコンテンツマーケティングとは

SEOの変化

Googleの検索アルゴリズムの変化で、より良質なコンテンツが評価されるようになった(AIで)

ディアビジネスの変化

メディア立ち上げのハードル低下で、広告枠は無限に増加しているため、今後のメディアは成果報酬型(サイトから購買に繋がるか)が求められる

日本のEC化率の変化

日本のBtoCにおけるEC率は5%弱。(アメリカでも10%ない)今後スマホの普及のように、EC化率は20%まで伸びると予測されている。

商品との出会い方の変化

従来のECは欲しいものが決まっている人には有効。しかし現実の購買では衝動買いやウィンドウショッピングなど、予想外な商品との出会いが存在している。そのため、今後は概念的な購買欲を満たすECサイト(メディア)が出るはず

今後コンテンツマーケサイトのディレクターに必要なスキルとは

データ分析力・データに基づいた戦略立案

数学的な知識までは必要ないにしても、最低限サイトのアクセスログから課題や仮説が作れるようになる

キャッシュポイントを作れるか

PVやUUなどの数値的なものに固執せず、いかにユーザーがお金を払ってもらう仕組みづくりができるかが大事

SEOの知識

外部のSEO専門会社に頼らず、自前で知識を持つことが大事。詳細は後述。

なぜディレクターにSEOの知識が必要か

小手先のSEO向上テクニックではなく、戦略的に考える必要がある

過去のようなGoogleの検索アルゴリズムを欺いて上位表示を目指すのではなく、サイトやページを有益なものにして、検索上位を狙う必要があるため

継続的なサイト改善が必要なため

常にユーザーニーズやユーザーを取り巻く環境が変化しているため、サイト全体の運用方針、予算、収益形態を理解して戦略的に施策を実施する必要があり、こうした業務はWebディレクターじゃないと難しい

収益に貢献する

SEOはあくまで集客手段の一つであるが、コンテンツの上位表示に成功すると、それが資産隣、収益や集客数が安定する。また、検索ユーザーには明確なニーズ(悩み解決、購買)があるので、コンバージョンに繋がりやすい

コンテンツマーケティングにおけるSEOのやり方

サイト名

適当に決めたり、かっこよさで決めるのはNG。SEOに強くブランドイメージを想起しやすいものが良い。覚えやすく、サービスを体現した名前で、SEO的に競合がいないものが良い(Facebookなどは好例)

ドメイン・URL

URLは必ず正規化して、オリジナルとなるURLを検索エンジンに対して明示する。

サイト構造

SEO的に重要な記事・情報はトップページから少ないクリック数でたどり着けるようにする。(ピックアップ記事やコンテンツを用意するなど)

個別ページ

SEO的に重要な要素はなるべくページの上におく。またh2やh3などは適切に使用し、文書構造を意識したサイトづくりをする。

コンテンツ(キーワード選定)

検索ボリュームと競合性(検索した時に他にどんなサイトが出るか)を意識してキーワードを選定する。また、特定領域の記事を増やすとそのジャンルに詳しいサイトと評価されて、それに近しい領域でも順位が上がりやすくなる。(ドミナント戦略

コンテンツ(ライティング)

Googleはわかりやすく、網羅的・専門的な情報を評価する傾向にあるため、パラグラフ・ライティングを意識してコンテンツ全体にキーワードを配置する。また、構成は【リード文⇨本論⇨まとめ】の構成で書く。

コンテンツ(編集)

スマホ読者を意識し、改行は多めに配置したり、代名詞(あれ、それ)などは少なめにする

公開後の改善

紙媒体とは違い、記事公開後も再編集が可能なため、順位チェックと記事のメンテナンスを繰り返すことで検索結果10位以内を目指す。改善のパターンとしては「コンテンツへの追記」「似た記事の統合」など。


こんな感じで、コンテンツマーケ初心者にもどういう所を気をつければ良いか、ということがわかりやすく紹介されており、とてもためになりました。

今日聞いたことを今後仕事にも生かして行けるよう、頑張りたいと思います。

土日にFlaskとIBM bluemixを触ってみた話

今週末は久々に何も予定のない土日だったので、ひたすらプログラミングをしてました。最近業務ではプログラムを書くよりもディレクションの仕事の割合が増えつつあるけど、やっぱりプログラム書いてるほうが楽しいんだよなぁ。

とりあえず今週末の成果の振り返りをしていこうと思います。

Flaskで簡単なものを作ってみる

今までPythonで作ったのは置換ツールやWebのスクレイピングなどが中心だったわけですが、PythonWebサービスなんかも作れたら面白そうだと思ったので、Webアプリのフレームワークを色々調べた結果「Flask」にたどり着きました。

http://flask.pocoo.org/

Pythonだと一番有名なのは「Django」だと思うんですが、今回はあくまで大規模なものは作る必要はなく、手軽にToDoアプリ系作れればいいかな、って感じだったので、一番手軽そうなFlaskを触ってみることに。

ひとまず操作に慣れるため、下記のサイトを参考にしながら、入力フォームに入れたデータを表示するだけのサイトを作ってみました。

http://www.yoheim.net/blog.php?q=20160505

1時間もかからず作れました。RailsでもTodoアプリ的なものを作ったことはあるけど、Pythonの方がソースが読みやすくて個人的には好きです。

公式のチュートリアルではブログを作る的なことがあったみたいだけど、それは一旦後回しにしています。

bluemixでFlaskで作ったサイトをアップしようと思った..けど出来なかった

やっぱり作ったサイトを開発環境だけで動かしてても面白くないんで、Paasで公開できるように色々いじってみました。

今回のようなお試しで作るサイトならHerokuの無料プランでもいいわけですが、前々からBluemixのwatsonには興味があり、あわよくばPythonで色々活用してみたいなーと思ってたので、勉強がてらBluemixでアップすることに。

こちらは下記のサイトを参考にしています。

http://qiita.com/siluejp/items/89c9ab4bd04c8b6bdd49

Bluemixの登録〜PythonのアプリをBluemix上に作成までは良かったのですが、git登録のところが、ネット上の情報がやや古めのものが多く、少し詰まってしまいました。

調べた結果、作ったアプリの「概要」を開き、 f:id:kaiten5:20170730200055p:plain
「継続的デリバリー」の項目の中にある「有効化」ボタンをクリック、

f:id:kaiten5:20170730200104p:plain
次に出るページで「作成」のボタンを押すと、

f:id:kaiten5:20170730200109p:plain アプリの中身がGitで触れるようになるので、あとはgit cloneすれば完了です。(2017年7月現在)

分かってしまえば簡単ですが、見つけるまでは苦労しました。。

一応Python+Flaskは元々テンプレートとして用意されているので、中身を書き換えて、git pushすればOK〜と思っていたのですが、これがうまく表示されず。。

解決法を調べましたが、解決できずに日曜の夜を迎えてしまったので、これは来週までの宿題にしようと思います。

まとめ

Webアプリを本番サーバーで公開するところまでは間に合いませんでしたが、引き続きFlaskはブログ作れるくらいには触って行こうと思います!

Mac二台持ちは捗るの?という話

ブログを作ってみたけど、今のところ更新できそうなネタがないので、技術系ブログによくある、PC(Mac)の作業環境の事について語ってみようかと。

私は個人PCとしてMacを二台持ちしてるので、Mac二台持ちはどうなのか、といった事を書きたいと思います。 これから書くことはWebのデザイナー兼プログラマーである私の使い方なので、二台持ちの良し悪しは人によって違うと思いますが、似たような境遇の方に参考になれば。

iMacMacbookを二台持ちしています。

私は自宅ではiMac(27インチ・2015)、持ち運び用でMacbook(2016)の二台持ちをしています。

なんだ、熱心なマカーかよ、って感じですけど、元々Mac派だったわけではなく、学生時代はデザイン系の学校にいたにも関わらず、頑なに一人だけWindowsを使うほどのWindows派ですし、今もWindowsは業務で使っているので、Windows自体は普通に使えますし、嫌いでもないです。

ただ、会社に入って古くなったPCを買い換える際に「せっかくだしMacも触ってみるかな」と軽い気持ちで買った中古のMacbookAir(11インチ・2014)が、低価格・低スペックの割に軽くて取り回しがよく「Macコスパいいな」と思って、気がついたらMacだらけになってました。一応言っておくと、Windowsでもちゃんと吟味して調べたり、自作PCで安い構成や手頃な4Kディスプレイを探せば、安く環境構築することは出来ると思いますが、吟味する時間よりも、迷わずにMacを買って、空いた時間でコード書いたりデザイン作ったりした方がいいなと思ってます。

デザイナーだから、プログラマーだからMacを選んだ、というのはさほど無く、「コスパが良い」「選ぶのが楽」でMacを選んでます。

ちなみに、MacBookAir→iMacMacbookはほぼ一年スパンで買い換えており、Mac二台持ちになったのは2015年の末のことです。

Macを二台持ちした感想

デザインもプログラミングも行う私にとって、iMacMacbookもそれぞれ最高の作業環境だと思ってます。

Macbookは軽いので毎日カバンに入れてても気にならないですし、外で空いた時間に、すぐカバンからPCを取り出して作業ができるので「家に帰ったらやろう〜」ということがなくなったのが一番の利点だと思ってます。Macbookはスペックが低いのでヘビーな作業には向かないですが、思いついた事や修正などを軽くやる程度には困った事は一度もありません。

一方、iMacの5KディスプレイはPhotoshopillustratorでは広大な作業環境が得られますし、コーディングでも複数のエディタを並べて作業ができるので、27インチMacを買ってからデュアルが不要になりました。また、Macは「Sketch」や「Affinity Designer」などのMac専用ツールなども使えるので、Adobe以外の選択肢があるのも良いと思ってます。

あとMacはターミナルが使いやすいですね。Windowsコマンドプロンプトは何だったんだ、って感じです。まあVagrantで環境構築したり、Windowsでもubuntu使えたりしますが、デフォルトで環境がある、と言うのがとても楽です。

なぜMacbook Proで統一しないのか?

じゃあMBP(MacbookPro)買えば一台で済むじゃん、って話は最もですが、MBPを選ばなかったのは、これも大学時代の経験からです。

大学時代は重さ2kgを超えるグラボ搭載の高性能ノート(15インチ)を持って大学に行ってたんですが、PCを入れたリュックを常に持ち歩いてると、肩がものすごく痛いですし、自宅で作業するときは画面の大きさ的にほぼデスクトップを使ってたので、ノートPCは結局ほとんど使わない状態でした。

以上の経験から、

  • 自宅:重さは気にしないが、作業環境の広さとスペックが大事
  • 外出:スペックはほどほど、それよりも軽さが大事

と言うように、自宅と外でPCに求められるスペックは変わるんだなー、と理解し、自宅と外で使うPCは分けたほうがいい、と言う結論に至りました。

以上の結論からMacbookProの使いやすさを評価すると、

  • 自宅:画面を広げるにはモニター別途購入、スペックは問題なし
  • 外出:外でもハイスペックが使えるが、かなり重くて体に負担

上記の通り、自宅はともかく外で使う時にやや不便です。

一方、iMacMacbookの二台持ちの場合、

  • 自宅:広大な作業環境、ハイスペックPCでストレスフリー
  • 外出:軽いPCで持ち運びが楽、カバンの出し入れがしやすい

このように両方のメリットを生かした使い方ができる上、メイン機として最上級モデルをカスタマイズしたMacbookProを買うのと、二台持ちするのは値段的に大きな差がないため、二台持ちをすることにしました。

別にMacではなく、Windowsで良いのでは?

自宅PCに関しては、実際は拡張性の高いWindows機を使いたいと思っています。iMacの5Kディスプレイは使い勝手もよく魅力的ですが、マシンスペックが元々そんなに高くないことや、高いお金でハイスペックなモデルを買っても数年後には買い換えの必要が出てきますし。

ですが、現状のWindowsMacほどディスプレイのスケーリングが綺麗じゃないことや、4K、5Kのディスプレイで手頃で高性能なものが数少ないので、iMacを使っています。そのため、今後のWindowsの機能進化次第ではWindowsに戻すことは検討しています。早く4Kやら8Kなどの高DPIディスプレイが標準化して欲しいですね。

一方、Macbookに関しては、世間一般でも言われてる通り、Macトラックパッドが優秀すぎて、Windowsを使う気にはならないです。Surfaceとかでもトラックパッド的な操作が出来ない訳ではないですが、いまいち動きがぎこちない気がします。この辺はハードとOSが一体化してるMacの強みですね。

以上の通り、MacWindowsに対するこだわりは無かったものの、自分に最適な環境を探った結果、Macに落ち着いてる、という経緯があります。

二台持ちは不便じゃないのか?

二台持ちは全く不便じゃない、といえば嘘ですが、普通に使う分には全く問題ないかと思います。

今はブラウザも自動でブックマークをマルチデバイスで連携してくれますし、データや素材はiCloudなどオンラインストレージに入れれば両方のPCで使えますし、プログラムの開発環境は「Vagrant」で管理、など色々なサービスを活用すれば一通りのことはできます。セキュリティ的にクラウドで管理したくない物だけはローカルで管理してますが、そうしたファイルもそこまで多くは無いですし。

デメリットは…ネット環境がないとツールの設定やファイルの同期が取れない事くらいでしょうか。スマホテザリングも使えば、ネットのない環境というのがほぼ無いため、そこまで不便には感じていないです。

二台持ちで気をつけること

データ管理の面では「作業データをローカルに保存しない」ということですね。せっかく外でデータを修正しようと思っても「あのデータiMacにしか入ってない!」となれば無意味なので。データ管理のやり方は1台で使ってた時と大きく変わりましたが、これは慣れでどうにでもなりますね。

まとめ

最初にも言った通り、この意見はWebのデザイナー兼プログラマーである私の使い方なので、全ての人にオススメできるかは別の話です。が、もしMacを検討してる方でiMacかMacbookProのどちらを買うかで悩んでいる方は、二台持ちを検討してみるのも良いと思います。

Webデザイナーがアプリの模写をしてみたら

先日、会社で外部のアプリエンジニアの方を招いて「ひたすらアプリ画面を模写する」勉強会的なことをやったので、Webデザイナーの目線で得られた気づきをまとめてみる事にしました

ちなみに、私はアプリ開発経験ゼロのへっぽこWebデザイナーなので割と当たり前の事しか言ってないです

描いてみて気づくことはたくさんある

今回模写したのはPinterestAndroid版だったんですが、模写してみるとアプリの細かい装飾の違いに気づくというか、普段ってすごい適当にスマホの画面見てたんだなーってのがよくわかった

「ここに罫線あったんだ」っていうのに始まり、「よく見ると改行位置おかしくね?」って所や「画像が並んでる所で左上だけ画像サイズが微妙に違う」とか。一番驚きだったのは「フォロー」と「フォロワー」という文字が省略されて両方とも「フォロ..」「フォロ..」となってて、どっちがどっちだよ、てな事になっていたり。

UIデザイナーの繊細なこだわりが見えて面白い反面、自分が作ったWebデザインの細かい装飾とかも一般ユーザーは大して見てないんだろうな、と思うと少しせつない気持ちになりました。まあそんなもんだよね

iPhoneAndroidでUIが全然違った

アプリ開発者からしてみれば「何当たり前の事言ってんの」って感じだと思うし、実際社内のiOSエンジニアにも言われた事ではあるけど、Webサイトしか触ってないとiOSAndroidの画面つきあわせて比較とかしない(うちの会社は)んで、結構驚きました(実機での動作確認で比較することはあるよ!)

でもよく考えたら、戻るボタンがあるAndroidとボタンのないiPhoneでUIは変わって当然だよね、って感じがするので「モバイルファースト」とか言ってるWebでもこうしたOSごとの見せ方の違いはデザイナーとして考えるべきだと思った。

今のWebサイトでそれをやろうとすると、OS判定からの表示出し分けで読み込み時間かかりそうだけど。

みんなで模写すると気づきも多い

別にアプリの模写って家に帰って一人でもできちゃうけど、やっぱり大勢でやると気づきも人数分増えていくので良いですね。

さっき言った通りiPhoneAndroidでUIが違うこともそうだけど、同じ模写でもフォントの大きさに着目する人がいたり、アイコンの形やデザインにツッコミを入れる人がいたり。

会社入る前の学生時代はWebの勉強はずっと一人で黙々やってたので、大勢でUIについて話ができるのは勉強会のいい所だなーと思いました。

ついでに、模写のやり方でその人の性格も見えてくるからそれも楽しかったり。

まとめ

結局、2時間くらいひたすら模写して、その成果物をみんなで見るだけの勉強会だったんですが、思いの外面白くて、参加してよかったなー、と。紙とボールペンあれば手軽にできちゃう勉強会なんで、空いてる時とかに他の社員も巻き込みつつ、今度は社内onlyでやってみようかと思います