モバイルファーストのウェブデザインがデスクトップに及ぼす悪影響

2024/02/06 287 users ウェブデザイン 余白 フォント ユーザビリティ上 デスクトップ

モバイルファーストのウェブデザインは、デスクトップで閲覧する際に重大なユーザビリティ上の問題を引き起こす。長いスクロールページにコンテンツが過度に分散され、余白が広がり、画像やフォントが拡大されるため、ユーザーが情報を把握し、理解することが難しくなるのである。 The Negative Impact of Mobile-First ... 続きを読む

CSSやJavaScriptの新しい動き、フロントエンドのWeb制作の現状とこれから必要とされるテクニックや考え方 | コリス

2017/06/09 86 users コリス jQuery フレームワーク CSS モジュール単位

ここ1, 2年で、フロントエンドの制作事情は大きく変化してきました。 スマホの登場によりレスポンシブ対応からモバイルファースト・モバイルオンリーへ、HTMLは構造化され、CSSはモジュール単位で実装され、JavaScriptは多くのプロジェクトでjQueryではなく新しいライブラリやフレームワークが採用されるようになりました。 フロントエンドのWeb制作の現在の状況とこれから必要とされるテクニック... 続きを読む

「次のモバイルファースト」がやってくる！UIと機能設計をIonic 2を使って学んでみよう | HTML5Experts.jp

2017/03/29 113 users レスポンシブデザイン 普及 モバイル 開発 スマートフォン

レスポンシブデザインが生まれたばかりの2009年には、はやくも「モバイルファースト」という言葉が使われ始めていました。 WebサイトはPCから見るものだったのは今や昔。今ではスマートフォンの普及により、多くのWebサイトではPCとモバイルからのアクセス数が逆転してるWebサイトも多く、「モバイルファースト」な開発も当たり前になりました。 しかし、2009年の「モバイルファースト」と、今の「モバイル... 続きを読む

乗り遅れるな！Googleが推奨するモバイルファーストインデックス（MFI）の注意点｜ferret [フェレット]

2017/03/22 54 users MFi Ferret フェレット インデックス 著者

ferret編集メンバーが不定期で更新します。 Webマーケティング界隈の最新ニュースからすぐ使えるノウハウまで、わかりやすく紹介します！ >> 著者詳細はこちら 昨年 Google が発表した「モバイルファースト インデックス （MFI：Mobile First Indexing）」が、ついに今年実装されます。実装時期は未定ですが、導入することは確実に決まっており、注目を集めています。 MFIが... 続きを読む

モバイルオンリー、グリッドの使い方の変化、ボタンに使われるアニメーションなど、Web制作者が備えておきたい現状とトレンドを解説 | コリス

2017/02/16 70 users コリス 人工知能 レイアウト ローディング時 グリッド

モバイルファーストからモバイルオンリーへ、レイアウトのグリッドやローディング時のアニメーション、ボタンに使われるアニメーションも少しずつ変化し、人工知能によるデザインなど、Web業界は着実に進化しています。 Webデザイン、そしてグラフィックデザインで今起きている現状と知っておきたいトレンドを紹介します。 2016年は「モバイルファースト」の年でした。そして、2017年はついに「モバイルオンリー」... 続きを読む

AIファーストに近づいた、米メディア「Quartz」 | ビジュアルシンキング

2016/12/05 978 users Quartz ビジュアルシンキング 標語 ピチャイCEO 指針

GoogleのピチャイCEOは「モバイルファースト」から「AIファースト」に標語を変えました。 メディアはこれまで、プラットフォーム、デバイスの変化に振り回されてきました。その法則で言うと、AIファーストはGoogleらプラットフォームが言うだけではなく、メディア側にとっても重要な指針となります。 この新しい流れに対して、早くから動いているメディアがQuartzです。2012年に老舗メディアグルー... 続きを読む

Googleは「モバイルファーストからAIファーストへ」。その理由は、いずれデバイスという概念は消え去り、インテリジェントなアシスタントになるから － Publickey

2016/05/02 458 users Publickey Alphabet Pichai デバイス

Googleは昨年8月に「Alphabet」とその傘下企業群という形に組織構造を変更したため、今年の手紙はGoogle CEOとなったSundar Pichai氏が本文を書いています。 この手紙ではGoogleの今後の方向性が明確に示されています。それは機械学習やAI（人工知能）への傾倒です。 Googleは創業当初からこの分野へ積極的に投資しリードしてきた存在ですが、今年の手紙の中でPichai... 続きを読む

「モバイルファースト」から「モバイルオンリー」へ

2016/01/15 70 users モバイルオンリー Tweet 田中善一郎 普及 モバイル向け

記事 田中善一郎 2016年01月15日 16:06 「モバイルファースト」から「モバイルオンリー」へ Tweet 「モバイルファースト」は当たり前になってきた。そしてサービスによっては、さらに「モバイルオンリー」に絞る流れも出始めている。 　数年前まで、ほとんどの主要なインターネットサービスはPCサイト向けが中心であった。ところが爆発的なスマホの普及を受けて、モバイル向けから優先して開発し、その... 続きを読む

「え、ダメなの？」iPhone用などの無料MS Officeアプリをタダで仕事に使ってしまうと...... - Engadget Japanese

2015/12/02 68 users iPhone用 Engadget Japanese 標語

「え、ダメなの？」iPhone用などの無料MS Officeアプリをタダで仕事に使ってしまうと...... BY 笠原一輝(Kazuki Kasahara) @KazukiKasahara 2015年12月02日 11時00分 0 Microsoftはここ数年、"クラウドファースト、モバイルファースト"という標語を利用して、クラウドサービスの拡充、そしてモバイル、つまりはスマートフォンやタブレット... 続きを読む

ASCII.jp：“負け組”マイクロソフトは、何をしでかすかわからないチャレンジャーになった (1/2)｜マイクロソフト・トゥディ

2015/10/09 54 users 転換 CEO 米マイクロソフト 施策 Office製品

2014年2月に、米マイクロソフトのCEOにサティア・ナデラ氏が就任して以降、マイクロソフトが大きく変革したのは、自他ともに認めるところだろう。 「モバイルファースト、クラウドファースト」への転換 最大の変化は「モバイルファースト、クラウドファースト」の方針を掲げ、Windowsプラットフォームにこだわらない施策を相次いで打ち出してきた点だ。 たとえば、Office製品は、従来ならWindows向... 続きを読む

特集：次期Visual Studioの全貌を探る：Visual Studio 2015の新機能をプレビュー版で見てみよう (1/5) - ＠IT

2014/12/08 62 users 全貌 マイクロソフト 連載目次 クラウドファースト 全体像

特集：次期Visual Studioの全貌を探る：Visual Studio 2015の新機能をプレビュー版で見てみよう (1/5) マイクロソフトが提唱するモバイルファースト、クラウドファーストな時代に向けてVisual Studioはどう変わるのか。プレビュー版を基にその全体像を探っていこう。 連載目次 Visual Studio 2015 Preview（以降、VS 2015 PV）が、11... 続きを読む

モバイルファーストからモバイルオンリー時代へのシフトとGoogle/Apple/Facebookのポジション - FutureInsight.info

2014/11/27 152 users Facebook Agile Cat ポジション Apple

2014-11-28 モバイルファーストからモバイルオンリー時代へのシフトとGoogle/Apple/Facebookのポジション Tweet ちょっと前の記事だが、以下の記事がおもしろかった。 クッキーは死んだ：そして Facebook／Google／Apple の広告が激変している | Agile Cat --- in the cloud これまでPCではWebブラウザのクッキー主体で行ってい... 続きを読む

「モバイルファーストからコンテンツファーストへ」レスポンシブWebデザイン専門家が語る、コンテンツの捉え方 | CONTENT MARKETING LAB（コンテンツマーケティングラボ）

2014/11/11 65 users LAB Content Marketing 捉え方

▼これまでのレスポンシブWebデザインに関する菊池氏のインタビュー記事 コンテンツストラテジスト必見！レスポンシブWebデザインがアツい理由 レスポンシブWebデザインのワークフロー、デザイニングインブラウザとは レスポンシブWebデザインを語る上で欠かせない！コンテンツストラテジストが知っておくべき「HTML5」のポイント 今回は、レスポンシブWebデザインについて学ぼうとすると頻出するキーワー... 続きを読む

超シンプルで簡単なフレームワーク「Responsive Grid System」でレスポンシブWEBサイトをつくろう（前編：導入編） | HTML5でサイトをつくろう

2014/06/16 252 users フレームワーク レスポンシブフレームワーク タブレット

最近は様々なレスポンシブ対応のフレームワークがでていて、これらを使うことによって簡単にPC、タブレット、スマートフォンに対応したサイトが作成できるようになりました。 そこで今回は本ブログのリニューアルで使用した、モバイルファーストを意識した超シンプルで簡単なレスポンシブフレームワーク「Responsive Grid System」の使い方を解説していきます。 本ブログのリニューアルや、先日発売され... 続きを読む

テキスト周りで使えるCSSの小技いろいろ | Webクリエイターボックス

2014/02/04 799 users CSS ユーザビリティ Webクリエイターボックス 目次 小技

モバイルファーストの概念が広まり、コンテンツ主体の「読ませる」サイトが増えてきた昨今。テキスト周りをより便利に、より素敵に表示できるようなCSSをいくつか集めました。ユーザビリティの向上も図れるようなものもあるので要チェック！基本的なテクニックが中心なので、初心者さん〜中級者さんの参考になればと思います。 テキスト周りで使えるCSSの小技　目次 テキストを選択する時の色を変更 蛍光ペンで線を引いた... 続きを読む

高さの異なるパネルを揃え、汎用性に優れたグリッドが簡単に使えるシンプルなフレームワーク -FlexGRID | コリス

2014/02/03 57 users コリス グリッドシステム グリッド フレームワーク パネル

CSSハックもJavaScriptも使用せずに、中身のテキストや画像の高さがバラバラでも各パネルの高さを同じにする、モバイルファーストのシンプルなグリッドシステムを紹介します。 非常にシンプルなグリッドなので、さまざまなプロジェクトに利用できると思います。 FlexGRID FlexGridは文字通り、柔軟なグリッドを提供するもので、非常にシンプルなHTMLと軽量のCSSで構成されています。 基本... 続きを読む

あぁこれがパララックス効果の使い方かと納得のパララックスWebデザイン7つ | Flips Blog Web担の小技

2014/01/25 392 users パララックス効果 Web担 Flips Blog 納得 小技

今回は、パララックス効果を用いた結果、口コミで広がり、海外でもわりと多くのシェアを誇るサイトを7つご紹介。 実は2014年のトレンドの一つとして、海外では 表示速度をあげる 六角形（蜂の巣） 軽量化 最小限 モバイルファースト コンテンツ最優先表示 というのが上げられていまして、もしかすると今年パララックスは減少傾向になると予測されています。 しかし、コンテンツ最優先表示では、いまだパララックスが... 続きを読む

Bootstrap 3正式版がリリース。モバイルファースト、レスポンシブ、フラットデザインなどを採用 － Publickey

2013/08/20 90 users Publickey グリッドレイアウト Bootstrap

複雑なCSSを自分で書かなくてもHTMLのマークアップで簡単に美しい比率のグリッドレイアウトを構成でき、分かりやすいボタン、パンくずリスト、メニューなどのWebページを記述できるCSSフレームワーク、「Bootstrap」の最新版「Bootstrap 3」が公開されました。 Bootstrap Bootstrap 3ではモバイルファーストを意識したデザインとなり、ボタンやメニューなどはフラットデザ... 続きを読む

Bootstrap 3(2.xも)を活用する時に役立つリソースのまとめ | コリス

2013/08/06 321 users コリス スマプ Bootstrap インターフェイス リソース

Bootstrapは先日リリースされたBootstrap 3rc1で、モバイルファーストのフロンドエンド用のフレームワークに生まれ変わりました。2.xまでは、デスクトップ用のブラウザを想定したインターフェイスのコンポーネントを核にしていました。 Bootstrapをカスタマイズしたり、もっと活用するためのリソースを紹介します。 まずは、本家のBootstrapから。 Bootstrap 3 スマフ... 続きを読む

[JS]スマフォ・タブレットでの利用を前提に作られたタブを実装するスクリプト -Tabby | コリス

2013/06/30 52 users jQuery Tabby コリス Opera Safari

スマフォ・タブレットでの利用を前提に制作されたモバイルファーストのタブコンテンツを実装するjQueryのプラグインを紹介します。 もちろん、デスクトップ用のブラウザでも動作します。 Tabby Tabby -GitHub Tabbyのデモ Tabbyの使い方 Tabbyのデモ デモでは3つのシンプルなスタイルが楽しめます。 Chrome, Safari, Firefox, Operaなどのモダンブ... 続きを読む

普段使ってるCSSのパフォーマンスとメンテナンス性をアップさせるOOCSSベースの超軽量フレームワーク -Kraken | コリス

2013/06/05 90 users Kraken コリス OOCSS CSS 超軽量フレームワーク

オブジェクト指向CSS（OOCSS）のコンセプトは普段使ってるCSSのパフォーマンスとメンテナンス性を向上させること。 そんなOOCSSをベースに設計された、モバイルファーストの拡張性も備えた超軽量フレームワークを紹介します。 Kraken Kraken -GitHub オブジェクト指向CSS（OOCSS）とは Krakenの特徴 Krakenのデモ オブジェクト指向CSS（OOCSS）とは Kr... 続きを読む

実直なHTML5/CSS3でつくられたモバイルファーストのフレームワーク -Markup Framework | コリス

2013/04/23 134 users UIエレメント コリス レイアウト ウェブサイト コピー

商用利用も無料、変更もコピーも再配布もOK、汎用性に優れたレイアウトやUIエレメントをスタンダードなHTML5/CSS3で実装したフレームワークを紹介します。 ウェブサイトを構築する際に、ベースとして利用するのによさそうです。 Markup Framework Markup Frameworkの特徴 Markup Frameworkのサポートブラウザ Markup Frameworkのデモ Mar... 続きを読む

レスポンシブデザイン・フレームワークの「Foundation」に新版が登場。「モバイルファースト」を強化してZeptoを採用

2013/03/02 120 users zurb Zepto Bootstrap フレームワーク 観点

プロダクトデザインを手がけるZURBがFoundationの新しいバージョン（バージョン4）をリリースした。Foundationというのは、Bootstrapなどと同様のレスポンシブデザインのためのフレームワークだ。ZURBによると、新しいバージョンはモバイルファーストの観点から、完全に書き直されたものだとのこと。「デザイナーに新たな考え方を促すものとなるでしょう」としている。ページの開発にあたっ... 続きを読む

モバイルファーストかどうかって言うんじゃなくてPC Web終焉の始まり | itokenv.com

2013/01/16 78 users itokenv.com うめ バス F’s Garage 去年

ちょうど去年の年末から「PC Web終焉の始まり」ってタイトルのネタで書こうと思っていたら、タイミングよくこんなエントリーが（笑） モバイルファーストは間違いだったのか « うめのんブログ. これに呼応して@fshin2000さんも F’s Garage @fshin2000 ：モバイルファーストが失敗なハズはないが、今はまだ時期尚早. 僕はどちらかというと、今年がまさに転換期でPCでのサービスを... 続きを読む

F's Garage @fshin2000 ：モバイルファーストが失敗なハズはないが、今はまだ時期尚早

2013/01/14 56 users バス F's Garage fshin2000 i-mode

…ということをi-modeで成功した実績を持つ日本人なら自信を持って言える。 モバイルファーストは間違いだったのか « うめのんブログ 理屈ではFacebookが選択していたWebとのハイブリッドアプリが正解のハズだったんだけど、残念ながらスマホのスペックはそこにたどりついてない。 故にアプリでやらなきゃいけないんだけど、アプリの世界はアップルもAndroidもいろいろ問題があって、面倒くさいので... 続きを読む