スマートフォン関連の記事一覧



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

記事の続きを読む




ついに!やってきますよ!

Galaxy Note 3にもAndroid 5.0が!


●ドコモ・auのGalaxy Note 3ともにAndroid 5.0へ

ドコモとauのGalaxy Note 3(SC-01F・SCL22)がAndroid 5.0(いわゆるlollipop)へのアップデート対象機種になったことが発表されました。

Galaxy Note 3ユーザーとしては嬉しい限り。

いやー、日本のキャリアの端末なのでAndroid 4.4で終わりかなと正直思っていましたから。

私が毎日使っているGalaxy Note 3はメッキもはげてきて悲しい感じですが、デカい画面でウェブも動画も電子書籍も見やすいですし、動作もスムーズなので購入してかなりの日数が経っていますが満足です。

20150608-Galaxy-Note-3がAndroid5アップグレード-01

記事の続きを読む



何度見ても「いやーこれはやられちゃったな〜」と思ったスマートフォン用のページデザインに出会ってしまったので紹介します。

今回紹介するのは「病院・薬局様のウェブサイト」のモバイルページです。

見たら一目瞭然なのでスマートフォンで表示しているイメージを。

それがこちら。

20150331-スマートフォン向け病院ページの決定版-01


ちょっと分かりづらいですかね…?

普通にスクリーンショットを撮ったものが以下の画像です。

20150331-スマートフォン向け病院ページの決定版-03

First View(=ページを開いて最初に見える部分のこと)はシンプルに青緑系のベタの背景色に、白の文字とロゴのみ。

超シンプルです!

こんなのでいいのか!?


記事の続きを読む



3月8日は国際女性デー(国際婦人デー)だそうですね。

Wikipediaによれば、アメリカの婦人参政権に対するデモが起源のようですね。

1904年3月8日にアメリカ合衆国のニューヨークで、女性労働者が婦人参政権を要求してデモを起こした。これを受けドイツの社会主義者・クララ・ツェトキンが、1910年にコペンハーゲンで行なわれた国際社会主義者会議で「女性の政治的自由と平等のためにたたかう」記念の日とするよう提唱したことから始まった。

国際女性デー - Wikipedia


私は思わぬ所で、それを知りました。

それはゲーム。

20150309-国際女性デーをゲームで知る-04

Marvel Contest of Champions(マーベル オールスター バトル)です。

このゲームはマーベルの色々なヒーローが戦う、いわゆる格闘ゲームです。

記事の続きを読む



Googleはモバイルファーストを強力に薦めている証拠かもしれません。

Googleのウェブマスターツールから「モバイル ユーザビリティ上の問題が検出されました」と題した警告とも受け取れるメッセージが届きました。(今見ているこのブログページの話ではないです)

20150116-Google-ウェブマスターツール-モバイルフレンドリーではない-01

Google のシステムは、貴サイトの 848 ページをテストし、そのうちの 100% に重大なモバイル ユーザビリティ上の問題を検出しました。この 848 ページの問題の影響で、モバイル ユーザーは貴サイトを十分に表示して楽しむことができません。これらのページは Google 検索でモバイル フレンドリーとは見なされないため、スマートフォン ユーザーにはそのように表示、ランク付けされます。

「重大な問題」だそうです。

記事の続きを読む



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

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

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

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

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


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

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


記事の続きを読む



レスポンシブwebデザインとは、ひとつのHTMLソースから、スマートフォンやPCなど複数のデバイスへ対応することですが、レスポンシブwebデザインのウェブサイトを作る上で、非常に強い味方になってくれるのがフレームワークのBootstrap(Twitter Bootstrap)です。

このBootstrapがあれば、誰でもすぐにレスポンシブwebデザインのサイトを作ることができます。



さて、その強力なBootstrapで今回はTipsを紹介。

Tipsは「スマートフォン表示の時だけ改行する」「スマートフォン表示の時だけ○○を表示する」というもの。

それでは実例を見ながら説明しましょう。


●実例「スマートフォン表示の時だけ改行する/○○を表示する」

実例で使うサイトは「グラシン工房」のページ。

スクリーンショットはPCのウェブブラウザーで見た時のものです。トップページの右側にあるサイトの説明文で「スマートフォン表示の時だけ改行する/○○を表示する」という技を使っています。

20141015-BootStrap-Tips-01

画像出典:紙モノ好きの遊び心を刺激するペーパーグッズショップ | グラシン工房


この部分は以下の様な文章が入っていて、実はそのままの状態でスマートフォンで表示すると、文字数の関係で変な所で折り返されたりしてしまいます。

2行目の「グラシンペーパーにパターン柄やイラストをプリントした」などはかなり長いですよね。

20141015-BootStrap-Tips-02

画像出典:紙モノ好きの遊び心を刺激するペーパーグッズショップ | グラシン工房


ひとつのHTMLでPCもスマートフォンもお手軽にキレイに表示したいので、スマートフォンで表示した時だけ改行を多く増やしたいわけです。

実際のサイトをスマートフォンで見た時には以下の様に表示されており、PCのウェブブラウザーで見た時よりも改行が多く入っています。(縦に長いという指摘は今回はご勘弁下さい)

20141015-BootStrap-Tips-03

20141015-BootStrap-Tips-04

画像出典:紙モノ好きの遊び心を刺激するペーパーグッズショップ | グラシン工房


それでは、ソースを見てみましょう。

記事の続きを読む



20170717-Android-Lの機能はGalaxyに既にある-12

画像出典:Android L Developer Preview(Android Developers)


Android 5.0になるのかもといわれているAndroid Lですが、LifeHackerでAndroid Lで搭載される予定の新しい機能が紹介されていました。


この記事を読んでみたら、「この機能、既にGalaxy Note 3に搭載されているわ…」というものが多数あったので、紹介します。

記事の続きを読む



新生活に備えて色々ガジェットを整理しないとな…ということで、iPhone 4S 32GBとGalaxy Note SC-05D(いわゆるGalaxy Noteの初代)を売ることにしました。

20140616-iPhone4S・GlaxyNote買取-0420140616-iPhone4S・GlaxyNote買取-05

画像出典:iPhone 4s 8GB White Unlocked(Apple)・ベネフィット | GALAXY Note | ちょっと大きいと、すごく使える。(Samsung)


買い取り依頼はソフマップではなく、iPhone 3GSと同じくドスパラ新潟店にて買取依頼をしてきました。


ドスパラ新潟店での買取金額を見るその前に、価格.comに中古品の買取上限価格が掲載されているので紹介します。

まず、ソフトバンクのiPhone 4S 32GBホワイトの買取上限価格は15,420円。

20140616-iPhone4S・GlaxyNote買取-07

画像出典:iPhone 4S 32GB SoftBank [ホワイト] 買取・下取価格(価格.com)


そして、docomo Galaxy Note SC-05Dの買取上限価格は13,500円となっています。

20140616-iPhone4S・GlaxyNote買取-06

画像出典:GALAXY Note SC-05D docomo 買取・下取価格(価格.com)


ではドスパラ新潟店ではいくらだったのでしょうか?

ちなみにドスパラ新潟店の買取査定の事前のお知らせで、iPhone 4S 32GBホワイトの買取価格上限は17000円程度、Galaxy Note SC-05Dホワイトの買取上限価格は13,000円程度と聞いていました。大きく価格.comの金額とは変わらないですね。

記事の続きを読む



2014年5月31日に花を見にカーブドッチへ行ってきました。

当日はかなり日差しが強かったですが、多くの人で賑わっていました。

Galaxy Note 3で撮影して、アプリのSnapseedで色調修正したものをアップします。つまりスマートフォンだけで撮影から色調修正を行いました。(画像のファイルサイズ変更はPhotoshop、フレームの処理はWindows Live Writerで行いました)

それでは撮影順にどうぞ。


ワインショップ手前。

20140602-カーブドッチの花(2014年5月31日)-1020140602-カーブドッチの花(2014年5月31日)-09

20140602-カーブドッチの花(2014年5月31日)-22

記事の続きを読む



ブログ著者

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

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

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

ブログ著者について

サイト内検索