シニア層を対象にしたスマートフォンサイトのユーザビリティ
2016年8月14日 UXデザイン, Webデザイン, スマートフォン 私の母は某アーティストの大ファン。20年以上ファンクラブにも入り続けている熱狂っぷりです。過去記事「シニア層のためのWebサイトユーザビリティ」では、そのアーティストのグッズを購入しようと奮闘していた母ですが、今度は別の目的でスマートフォン版のそのサイトを操作したみたいです。今回は私がそれを横目に見ていて感じたことを書いてみます。 ↑私が10年以上利用している会計ソフト！ ライブチケットの当選確認をしたかった母 ここ数年はMacを触る機会もほとんどなくなり、スマートフォンでWebサイトの閲覧をしている母。そして秋に行われる某アーティストのツアーのチケットに応募しており、その当選発表があったので確認がしたかったようです。 それを聞いて「私がやるよ〜」と申し出たものの、娘に頼ってはいけない！という母の思いからか、何度手伝う
UIの新鮮なアイデアをチェック！デザインやインタラクションの工夫が素晴らしいナビゲーションのまとめ
最近のUIは、気持ちいいアニメーションが多く取り入れられています。アニメーションはある程度予測できながらも、いい意味で少し期待を裏切るくらいがちょうどいいなと思います。 アニメーションを使ったインタラクションやデザインが素晴らしいナビゲーションの実装例をまとめました。各デモは全て、HTML, CSS, JavaScriptなどをオンラインで編集することができます。
CSSのfilterプロパティを使ったメイン部分がぼけるサイドメニューの作り方
こんにちは、井畑です。 前々から好きでよく見ているデザインギャラリーサイトMUUUUU.ORGでサイドメニューがぬっと出てきてメイン部分の背景がぼやけるのかっこいいなーと思ったので、実装できるか挑戦してみました。 調べたところ、CSSのfilterを使うのがお手軽な感じだったので、それを採用しています。それではどうぞー!! サイドメニューがぬっと出て来てぼやけるサイドメニューの作り方 順を追って説明します。まずは基本的なサイドメニューの作り方です。 まずは、サイドメニューを作る 今回はぼやけるのを確認しやすくするために、背景を写真にして作成しました。ねこねこ。右上の「menu」を押すとサイドメニューが現れます。 See the Pen 普通のメニュー by Tetsuya Ihata (@tihata) on CodePen. サイドメニュー作成時のポイント ポイントはメニューとメインの部
スマホサイトで指定すべき最適なフォントサイズとは？（モバイルフレンドリー対応） | ブログ | SINAP - 株式会社シナップ
こんにちは、内藤です。 モバイルフレンドリーの連載、第3回目です。前回、GoogleとAppleの推奨するフォントサイズについてご紹介しました。では実際、世の中のサイトはどのくらいのフォントサイズを設定しているのでしょうか。今回、"記事が読まれること"を主目的としているサイトを30ほどピックアップして、各サイトのフォントサイズ、文章量について調べてみました。 また設計時に判断の迷う、「ページ分割」についてもリサーチしてみたので合わせてご覧ください。 <SINAP モバイルフレンドリー対応 連載> 第1回：「スマホで読まれる文章とは？」 第2回：「GoogleとAppleの推奨フォントは？」 第3回：「スマホサイトで指定すべき最適なフォントサイズとは？」 第4回：「スマホサイトの「続きを読む」は必要か？」 第5回：「スマホで読まれる文字数は？」 第6回：「記事をページ分割するメリット・デメリ
モバイルフレンドリー対応_GoogleとAppleの推奨フォントは？ | ブログ | SINAP - 株式会社シナップ
こんにちは、内藤です。 モバイルフレンドリー対応の連載、第2回目です。今回は、GoogleとAppleの推奨するフォントについて調べたので、それをお伝えしたいと思います！ とはいえ、ウェブ制作をされている方ならご存知の方は多いと思いますので、今回はさらっとおさらいしていただければと思います。 <SINAP モバイルフレンドリー対応 連載> 第1回：「スマホで読まれる文章とは？」 第2回：「GoogleとAppleの推奨フォントは？」 第3回：「スマホサイトで指定すべき最適なフォントサイズとは？」 第4回：「スマホサイトの「続きを読む」は必要か？」 第5回：「スマホで読まれる文字数は？」 第6回：「記事をページ分割するメリット・デメリット」 それでは第2回、いってみましょう。 フォントの設計にある程度の正解は存在する ウェブは誰のものでもないので、良くも悪くも「このルールに従って作りなさい」
スマホのメニューデザインに悩んだらこれ！パターン別サンプル36選 | LISKUL
スマホはメニューバーが命！！ スマホでもっとも重要な動作は「タップ」ですが、その重要な役割を引き受けるのがメニューアイコンやリストです。 ユーザが求めるコンテンツにスムーズにつなげられるよう、最適化していくことが必要です。 ただそのデザイン、「なんとなく」のものになっていませんか？ 違和感なくスムーズにコンテンツにつなげるためには、最適なデザインを選択する必要があります。 今回は100のスマホサイトを調査し、その中で代表的な36サイトから7つのメニューデザインに分類し、まとめてみました。 自分のスマホサイトの性質を考えながら、もっとも適切なメニューを探していきましょう！ 100のスマホサイトから見る、 スマホメニューの人気ランキング 上図は、100のスマホサイトをランダムに抽出し、それぞれのサイトで採用されているメニューの割合を調査した結果になります。この結果によれば、一位が圧倒的な割合で
スマートフォンサイト制作時に覚えておきたいCSS 15
スマートフォンサイトを制作する際、個人的に覚えておいた方が良いと思うCSSのプロパティやテクニックをまとめてみました。 自分用の備忘録ではありますが、他のブログ等でも取り上げられていることが多いので、いずれも覚えておいて損はないものだと思います。 普段から制作している方にとっては目新しいのはないと思いますが、まだスマートフォンサイトを制作したことがない方やまだまだ苦手だなと思う方は参考にしてみてください。 UA切り替え・Viewport指定・拡大縮小の有無・電話番号リンクの無効化・ホーム画面用のアイコン指定など、スマートフォンサイトを制作する際に最低限覚えておくべきと思うことは他にも沢山あるんですが、今回はCSSに焦点を当てています。 また、タイトルでは「スマートフォンサイト制作時」としてはいますが、レスポンシブWebデザイン制作時でも頻繁に使うものだったり、PCサイト制作時でもCSS3に
新しいGoogleマップをレスポンシブ対応で埋め込む方法 | ライフハッカー・ジャパン
Digital Inspiration：新しくなったGoogleマップでは、ウェブページに地図を埋め込むことが可能となりました。Googleマップのサイトを開き、埋め込みたいエリアをズームインします。右下の歯車アイコンをクリックして、メニューから「地図を埋め込む」オプションを選択すれば、埋め込みコードを取得できます。 埋め込みコードを使ったサンプルページがこちらです。デフォルトでは、Googleマップがレスポンシブに対応していません。スマートフォンなどでページを開くと、地図のサイズがデバイス画面にフィットせず、はみ出してしまいます。 同じGoogleマップをレスポンシブ対応で埋め込んだサンプルがこちら。ブラウザをリサイズしたり、スマートフォンからページを開いても、画面に合わせて地図のサイズを自動調整してくれます。 Googleマップをレスポンシブに埋め込む方法 以下がGoogleマップのデ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
スマートフォンサイト制作 よくあるトラブルと 解決方法・回避方法