デザイン関連の記事一覧



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

記事の続きを読む




20141128-コーヒーと火災報知器-03

DTPの勉強会で11月15日に東京に行ってきました。今回はテーマがInDesignということで、入り口の張り紙のカラーは紫色。


DTPの勉強会第15回の会場は浅草橋駅の前の「ヒューリック ホール & カンファレンスRoom1」というところ。

ウェブサイトはHG丸ゴシックM-PRO感ありますが、Wi-Fiサービスや温かいおしぼりの無料サービスという驚きのサービスもあり、なかなか良いホールでした(会場の参加者側の電源がほとんどない以外は)。

20141128-コーヒーと火災報知器-01

画像出典:【秋葉原・浅草橋】ヒューリック ホール & カンファレンス│貸し会議室/イベントホール



●コンビニのコーヒーは画一的?

この会場は1階にコンビニのスリーエフがあるのですが、ここでのコーヒーサービスに驚きました。

お金を払うと、紙のカップを渡されるところまでは普通のコンビニと一緒です。

しかし、スリーエフではなんと6種類のコーヒーから選べるのです。セブンイレブンみたいに1種類ではないのです(サークルKサンクスは結構あるけど)。

ちょっと店内の写真はないのですが、6種類のコーヒーは、コーヒーウォーマーの上にデカンタに入っています。こういうのね。


Kalita デカンタ 1.8L ブラック
by カエレバ
記事の続きを読む



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マガジン
記事の続きを読む



Twitterの「みつける」の機能で見かけたのですが、これはナイスなアイデアだと思ったので紹介します。

それは、このmtブランドの「竹の定規の目盛り」がテープに印刷されたマスキングテープ。

商品名は「mt ex竹定規」で、型番は「MTEX1P97」です。

20140921-マスキングテープの竹定規デザインがおもしろい-01



おおお!これは見ただけで便利そう!って思えますわ。

記事の続きを読む



Adobeが関わっているセミナー・イベント(主催以外も含む)の一覧ページをTwitter経由で知ったので、こちらでもお知らせ。

こんな感じのページです。

20140531-Adobeセミナー・イベント一覧-01

画像出典:イベント : 月別(Adobe)


知りませんでした。大きなセミナー・イベントしか掲載されていないようですが、大都市圏近郊の方はご覧になってはいかがでしょうか?


あとは補足です。

記事の続きを読む



All Aboutのページを見ていて、ナビゲーションのリンクを間違ってクリックしてしまったので、紹介する。

見ていたページは「PGPで暗号化メールを送るには」(All About)と言うページだ。

20140322-All-About-ナビゲーション-01

ページの後半にクリックを間違ってしまったナビゲーションがある。


記事の続きを読む



20131003-タブの様な形の上辺のみ角丸四角形-00


上辺が角丸になっているタブ状の四角形をIllustratorで作ります。
こんな形のものです。
20131003-タブの様な形の上辺のみ角丸四角形-01


Fireworksでは、これはすぐにできます。
自動シェイプの角丸四角形を使って、下辺の角丸の大きさを「0」にするだけです。
20131003-タブの様な形の上辺のみ角丸四角形-02

超簡単でしたね!


でも…残念ながら、FireworksはCS6で開発が終了。
Adobe Creative Cloudを使うユーザーは、Fireworksではなく、Illustratorでこうしたオブジェクトを制作しなくてはいけません。(Photoshop CCではできるがな…)


ということで、DTPでIllustratorを使っている人も、ウェブ制作でIllustratorを使わざるを得ない人も、上辺が角丸の四角形(以下タブ型角丸四角形)を作る方法は何かに役立つはず。
記事の続きを読む



ひらめいた!のイメージは電球がよく使われますが、最近はフィラメントの電球なんてわからない人も多くなってきたのではないでしょうか。


本日(2013年5月8日)の日経産業新聞20面のクラボウさんの広告

出典:本日(2013年5月8日)の日経産業新聞20面のクラボウさんの広告より。


なるほど、最近はLED電球ですね。


先日「セル画の意味がわからない人たちも多くなってきたのでは」ということがTwitterで見かけましたが、同じ感じなのかも。(今時だもフレームなのかな?)

「チャンネル回す」もそうですね。

でも、「誤植」みたいに残るものもあるからなにが残るのかはわからないですけど。
記事の続きを読む




201303110-鶴ヶ城プロジェクションマッピング「はるか」-00
出典:鶴ヶ城プロジェクションマッピング「はるか」


Facebookで鶴ヶ城のプロジェクションマッピングの写真がアップされていて、隣の県だし、ちょっと行ってこようかな…と思ったけど、YouTubeの動画を見て、行くのをちょっと躊躇した話。


まず、プロジェクションマッピングとは何なのかということですが、ニコニコ大百科から引用します。
プロジェクション・マッピングとは、物体に映像を投影する表現手法のことである。

概要

ビデオやCGなどの映像を、プロジェクターによって直接建造物・自然物などを含めた立体物に投影する。しばしば「最先端」と呼ばれる新しい表現手法である。

周囲を暗くし、投影する距離や角度を緻密に計算することによって、あたかも投影されている物体そのものが発光していたり、形が変わったり、透けたりしているかのように見せることができる。特に建造物などの大規模なものは圧巻で、音楽や効果音が加わることによって空間そのものをデザイン・演出してしまう。その仮想と現実が入り交じったような迫力のある映像には思わず見入ってしまうだろう。
プロジェクション・マッピングとは (プロジェクションマッピングとは) [単語記事] - ニコニコ大百科
ということで、スクリーンではなく、物体に映像を映し出すところが新しいとされています。


プロジェクションマッピングで有名な所としては2012年9月の東京駅のプロジェクションマッピングでしょうか。これは圧巻でしたね。何度も動画を見てしまいました。

出典:TOKYO STATION VISION 東京駅プロジェクションマッピング - YouTube



それで今回の会津の鶴ヶ城のプロジェクションマッピングですが、見た動画は次のものでした。

出典:ふくしま 会津 鶴ヶ城 プロジェクションマッピング 「は る か」 - YouTube


見た印象は「…うーん…」という感じでした。

記事の続きを読む



ブログ著者

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

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

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

ブログ著者について

サイト内検索