アイコン関連の記事一覧



20150609-ハンバーガーメニューのABテスト-00

スマートフォン対応サイトで右上や左上にある「≡」こんな形の三本線のメニューはいわゆるハンバーガーメニューと言いますが、ハンバーガーメニューのデザインに関してA/Bテストを行っていた記事があったので紹介します。



●ハンバーガーメニューのデザインパターン

ハンバーガーメニューは色々なデザインがあって、例えば以下の様なパターンがあります。(サイトイメージは「グラシン工房」から)

まずはBootstrapの標準に近い形式。三本の線があるだけのパターン。

20150609-ハンバーガーメニューのABテスト-01


次に三本の線のしたにメニューという文字を配置して、アイコンの意味を説明するパターン。

20150609-ハンバーガーメニューのABテスト-02


三本線を線(border)で囲い、ボタンらしく見せるデザインのパターン。

20150609-ハンバーガーメニューのABテスト-03


他にもいくつかデザイン・表現方法がありますが、それは前に書いた「【Web制作】スマートフォンサイトのメニューのアイコンデザイン・表示を比べてみた」の記事をご覧ください。



●アイコンだけ・文字付き・枠線付き、どれがいいのか?

さて、テストした結果ですが、実際のテストアイコンやサイトデザインは「Do Users Understand Mobile Menu Icons?」をご覧ください。以下のアイコンはイメージです。


さぁ皆さんは以下のどのメニューが一番クリックされたと思いますか?

三本線だけのメニュー・三本線の下に文字でメニュー・三本線を枠線で囲ったメニューです。

20150609-ハンバーガーメニューのABテスト-04 20150609-ハンバーガーメニューのABテスト-05 20150609-ハンバーガーメニューのABテスト-06

記事の続きを読む




20150205-MovableType-TinyMCEでBootstrapアイコン-01

●リッチテキストエディタでBootstrapのアイコンが消える

Movable Type 6にて標準搭載されているリッチテキストエディタのTinyMCEがあります。

このTinyMCEのエディタを使用し、HTML編集モードにして以下のHTMLを記述します。

<p><span class="glyphicon glyphicon-circle-arrow-right"></span></p>

<span class="glyphicon glyphicon-circle-arrow-right"></span>はBootstrapのアイコンの記述です。


その後、リッチテキストエディタ(WYSIWYGモード)に切り替えると、HTMLのタグが消えて以下の様になってしまいます。

<p><br /></p>

これでは本文中にBootstrapのアイコンを入れることができません! なんてこった!

記事の続きを読む



●メニューのアイコンって分かりづらくないですか?

20150113-スマフォサイトのメニューボタン周りのデザイン-00

スマートフォンサイトの構築というものは今やマスト、しなければならないことのひとつとなってきました。

このスマートフォンサイトのデザインというのも、私はほとんど(Twitterの)Bootstrapを使っていて、ほとんどコレで事足りる気がします。

しかし、メニューのアイコンについて、これで本当に訪問者は分かってくれるのだろうか?と感じることもしばしば。なので、もっと良いアイデアはないかなと思って、私がよく行くサイトを見てみることにしてみました。


見てみるサイトは以下の通りです。

  • Bootstrap
  • Response(自動車)
  • モスバーガー(外食)
  • 朝日新聞(メディア)
  • AllAbout(情報サイト)
  • ユニクロ(アパレル)


記事の続きを読む



20160101-SmartNews-アイコン-02

みなさん、ニュース閲覧アプリのSmartNews(スマートニュース)を使っていますか? 私は頻繁に使っています!


さて、TwitterでSmartNewsのアイコンの変遷がおもしろいというものが流れてきました。


確かにおもしろいので、時系列順に見てみましょう。


●SmartNews以前

まずはSmartNewsになる前(笑)。「NEWSどうぞ」というアプリ名(の予定)だったのですね。

アイコンデザインを見てみると、カラーで分けられたNEWSのイメージが表現されているのだと思いますが、文字の置き方が適当過ぎる。せめて「どうぞ」はそれぞれのカラーのセンターに来るように置こうよ。「ぞ」だけ左に寄っているように見えてしまいます。

20141022-SmartNewsアイコンの変化・変遷-01

画像出典:SmartNewsのUI/UXエンジニアが語る!「iPhoneの画面サイズと室町時代の違い棚」 (Find Job ! Startup)



●SmartNewsリリース直前

そんなイケてないアイコンを作り直したのが、dot-ai, Vol.1「超絶アピアランス祭り」で講師だった、あの「鈴木 ともひろ」さんです。

アイコンデザインはニュースペーパー(新聞)らしいデザインに、仕分けされたカラーの付箋のようなものが付いていて、ニュースをただ流すのではなく、編集している(ピックアップしている)ということが表現されているのだと思います。

20141022-SmartNewsアイコンの変化・変遷-02

画像出典:SmartNewsのUI/UXエンジニアが語る!「iPhoneの画面サイズと室町時代の違い棚」 (Find Job ! Startup)


なお、SmartNewsの初期のアイコンの納期はなんと3日!(汗) 超短納期ですね…。(2014/10/22追記)

その当時、「SmartNews」のアプリ開発は難航していました。アプリの申請をする1ヶ月前に、ようやくユーザーテストに漕ぎつけたのですが、期待した結果に至らず、急遽メインアイコンや名前を変更することになりました。

時間がない中で思いついたのが、ランサーズに依頼することでした。その時は、依頼期間わずか3日だったのですが、魅力的な提案が次々と集まりました。

あと1ヶ月しかない!?クラウドソーシングでピンチを脱した「SmartNews」リリース秘話 | Lancersマガジン
記事の続きを読む



20140920-Facebookお知らせアイコン-06


以前、小杉さんが地域によって、お知らせアイコン(=地球のマークのあれです)がアジア側とアメリカ側に変わるって話をしていました。

パソコンのFBの、お知らせアイコンに違和感を感じていたんだけど、地域によってアジア側とアメリカ側に変わるらしい。

小杉 聖 - パソコンのFBの、お知らせアイコンに違和感を感じていたんだけど、地域によってアジア側とアメリカ側に変わるらしい。...


●地域によってアイコンが違う

その時、私の表示はアジア側の表示になっていました。PCのウェブブラウザー版の画面ではその部分の画像は以下の画像が使われていることを確認しました(表示する時は一部だけを表示させている)。

20140920-Facebookお知らせアイコン-01

画像出典:http://facebook.com/rsrc.php/v2/yy/r/tbri57MO9yd.png


よく見ると、アジアとアメリカだけでなく、ヨーロッパ・アフリカ方面も入っているのですよね。

記事の続きを読む



20130213-Windows8-スタート画面にピン留めする-00

みなさん、Windows 8使っていますか?
私は発売記念のダウンロード版で安く購入しました。32bit版。


結構快適に動いていますし、新しいスタート画面も、スマートフォンやタブレット端末に慣れている方なら、すぐに慣れるかと思います。マウスだとちょっと違和感を感じるのかもしれませんが、私はペンタブレットを使っているので…。


さて、そのWindows 8の新しいスタート画面にウェブサイトのブックマークをタイルとして置けることをご存じでしたか?
これはピン留めという機能で実はInternet Explorer 9からの機能です。

スタート画面のタイルとして置かれると、まるでアプリのような感じです。
登録したウェブサイトへアクセスしやすくなるので、ウェブサイトへ繰り返し来てもらうために設定しておくことをお薦めします。


このピン留めしたサイトですが、Microsoftが言うにはなんと15〜50%アクセス数が増加するそうですよ!(Windows 7+Internet Explorer9+タスクバーへピン留め)
Developers can utilize pinned sites to better connect their site with their users and promote their site’s brand directly in the Windows start screen. We found that sites that used this feature with IE9 on Windows 7 see anywhere from a 15 percent to 50 percent increase in site visits.
Pinned Sites in Windows 8 - IEBlog - Site Home - MSDN Blogs


今回はWindows 8のスタート画面へのピン留めに大切な設定で最小限必要なものだけ紹介します。
ものすごく簡単です!


記事の続きを読む



Google Nexus 7使っていますか?

私はNexus 7は親にプレゼントして、使ってもらっています。
すぐに検索したりする癖が付いた様で、色々な事を調べているようです。


しかし、大きな問題が…。

それはホーム画面に使うだろう・使っているアプリやウィジェットを置いてあっても、しばらくすると、あらぬ所に移動している!もしくは消えている!という現象が…。


使い方をよく見ていると、どうもアイコンにタッチする時間が長すぎて、アイコン移動モードになり、ドラッグして移動してしまう様なのですよね…。


「いつも使っているアプリがない!」と言われる前に対策をしようと思ったので、ホームのアプリを変更してみました。


今回使用するのはNova Launcherというアプリです。

20130115-Nexus7-Nova-Launcher-デスクトップロック-00

今回このホームアプリを選択した理由は以下の通りです。

  • アイコンのロックの機能がある
  • Google Nexus 7の標準ホームアプリと画面がそんなに変わらない
  • 私が他のAndroid端末(Galaxy Note)で使用している(笑)

標準ホームアプリと見た目がそんなに変わらないことは結構重要で、今まで使用していた人がガラッと雰囲気や操作方法が変わってしまうことで混乱してしまうことを防ぎたかったからです。


記事の続きを読む



20120513-google+アイコン-00


今井阿見さんの「Google+ iPhoneアプリは透過アイコンに対応してます +Plus One World」という記事を見たので早速やってみました!



なお、さっきまでのGoogle+のアイコンは以下の画像でした。
Twitterと同じですね。
20120513-google+アイコン-02

そもそもこのアイコンの画像は私が皆さんの前に立ってお話しするきっかけになった「DTP Booster」用のアイコンから作ったんですよね。


それはさておき、このアイコンから背景透過のアイコンを作ってGoogle+に設定してみます。

記事の続きを読む



20111009-docomo-00

直近のスマートフォンのネタというと、iPhone 5が出るかと思いきやiPhone 4Sで、日本でも10月7日にSoftBankとauで予約が始まりました。

現在iPhone 3GSを使用しているので、10月8日に早速予約しに行ってきました(10月7日は20時まで勤務だったので無理('A`))。


新潟のヨドバシカメラで予約したのですが、相変わらずというかなんというかケータイ売り場は閑散としていて(ビックカメラのケータイ売り場は人がいる印象はあるけどヨドバシカメラはあまりないんだよね)、駐車場から連絡通路を歩いているときに、iPhone 4S予約やっています!と書かれた板を持ってSoftBankとauの人が声を張り上げているのが見え、「おお!やってんな!」と思いましたが、店舗に着いたときにはどちらも休憩に入っていましたw(朝行ったのに…もうかよw)


SoftBankの服を着た人に「iPhoneの予約したいんですけどー」と声を掛けて早速手続きに。
そう、新潟は全然予約指定人がいませんでした…。

手続きも大変スムーズに進み、なぜか売り出し中の「iPad2が無料で使えるっぽく見えるキャンペーン」(→これ)も、あんまりプッシュされることもなく「こんなキャンペーンもやっていますので本契約時に是非ー」とか口頭で説明して終わり。


予約している人数は10月8日の朝の時点で20名程度だそうで、初回入荷分には入るか入らないかって所でしょうかね。とはいえ少なすぎるだろ!w



というところで、iPhoneな話題がTwitterのTLを賑わせていますが、ドコモが10月18日に新製品の発表を行います。


特設サイトのデザインがDTPな人達には思う所があると思うので紹介します。
記事の続きを読む



iPhone 3GSにiBooksをインストールすると、もしかしてPDFを開く時に色々な選択肢が出てくるようになるのかな。

それともPDFを開けるアプリケーションが複数インストールされていると自動的に色々な選択肢が出てくるようになるのかわからないけど、これは違うだろ、という感じになっていた。

以下はそのときの画像。

記事の続きを読む



ブログ著者

名前:(Google+のプロフィール)

ケータイ好き。ガジェットが好きでiPhoneやらAndroidなどを所有。Surface Pro 2も持っている。

お仕事は印刷会社で営業・広報活動・DTPオペなどをしています。要は何でも屋さんです。最近は印刷関連より、自社のウェブサイトを制作するお仕事がほとんど。使用しているCMSはMovable Type。

ブログ著者について

サイト内検索