Web Design

モバイルフレンドリーなwebデザインするときにおすすめなツールまとめ


みなさんこんにちは、mayukouです。
今回は、スマホサイトやレスポンシブでスマホサイズのデザインを確認するためにおすすめのツールをご紹介します。
なんとgoogleさんは、モバイル対応の有無で検索順位が影響すると、発表されたようです。

Google、モバイルファーストインデックスの導入予定を正式発表。スマホ向けページを検索の評価対象に。SEOへの影響は?


対応は2〜3ヶ月先になるようなので、今のうちにモバイル対応をバッチリしておきましょう(^_^)

スポンサードリンク

モバイルフレンドリーとは?

ウェブサイトをモバイル(スマホ)ように表示を最適化し、
ユーザーが快適にモバイルwebサイトを閲覧できるようにすることです。
SEOラボより

今では、スマホ最適化のレスポンシブwebデザインや
スマホ用にウェブサイトを別に作るなど、様々な対応がとられています。

スマホ表示確認におすすめのツール

Blisk



使用するのに時間制限がありますが、サーバーにアップしないローカルサイトも確認できるのでオススメです。無料ですが、プレミアム版は月額9.99ドルほどで無制限に使えます。
確認にあまり時間をかけない場合だと、無料でも使えますが、
じっくりHTMLの構造を見たいときは要注意です。
同一画面上で、スマホ画面とPC画面を確認できます。
iPhone4〜iphone7 plusまで確認することができます。
あとは、NokiaやSAMSUNGGALAXYS3〜S6など多様な機種を確認できます。

Blisk – こちらからダウンロードできます

※ソフトを立ち上げると、ポップアップで「機密情報を〜許可していいですか?」とでますが、念のため「拒否」を選んでいたほうがいいでしょう。

iOS simulator

Xcode というアプリ制作ツールに入っている、iPhone をシミュレーションできるツール。
さまざまなiOSのバージョンを確認することができます。
X code

Chromeユーザーには「MobileLayouter」



Mobile Layouterは、Chrome のアドオンです。
iPhoneやタブレットの確認ができます。
Chromeにアドオンで「Mobile Layouter」で検索して追加すると利用できます。無料です。

確認できる機種

iPhone5s
iPad mini
iPad
Nexus4
Nexus7
Nexus10

最後に

いかがでしたか?スマホサイトを作る際に、参考になれば幸いです。ぜひチェックされて下さい。

投稿者プロフィール

mayukou
mayukou
Webデザイナー修行中のmayukouです。webデザインのお仕事を始めてなんとか約6年が経ちました。とにかく技術を高めようと思っています。仕事で得た知識やお役立ち情報をご紹介いたします。宜しくお願いします。水彩画を勉強中です。趣味は音楽鑑賞(洋楽)、料理、読書、ブログです。
詳しくはこちら

Twitterをフォローしていただくと、最新情報を見逃しません♫

関連記事

  1. Web Design

    自分の頭をデザイン脳に!CSS nite fukuoka vol.8に参加しました

    みなさんこんにちは、mayukouです。このあいだ1月に行われたセミ…

  2. jQuery

    横幅いっぱいに表示可能なスライダーのjQueryプラグイン 「Skippr」が便利!

    みなさんこんにちは。11月に入り寒くなりましたね。今年もあと2ヶ月と…

  3. jQuery

    簡単設置で見やすい!レスポンシブ対応メニューslicknavの使用方法

    みなさんこんにちは、mayukouです。さて、4月21日から、goo…

  4. Web Design

    コピペでOK!wordpressに設置するシンプルな検索ボックス

    こんにちは。mayukouです。最近は、wordpressのカスタマ…

  5. Web Design

    【有料記事】スキルアップしよう。デザイン力が育つ方法とは。

    みなさんこんにちは、mayukouです。デザイナー5年目の私が、仕事…

  6. Web Design

    書評「だからそのデザインはダメなんだ」で適切なUIデザインを考える

    みなさんこんにちは、mayukouです。最近では、webデザイナーと…

コメント

  • コメント (0)

  • トラックバックは利用できません。

  1. この記事へのコメントはありません。

CAPTCHA


メルマガを購読する

Web Design Cafeの メルマガを購読する

更新情報や、お知らせ、お得情報をゆる〜く配信(月1程度)。


最近の記事

instagramもやっています

facebook更新中!

スポンサー

こんなサイトも作ってます。

  1. 写真

    食べ物やブツ撮りにおすすめ♩PENTAXの単焦点レンズ買いました。撮ったものなど…
  2. Mac

    Marvericksアップデート時のPhotoshopのバグが直りました
  3. Photoshop

    Photoshopのウィンドウを見やすく!ワークスペースを工夫してみよう
  4. Illustrator

    空を可愛く!Illustratorで虹を簡単に描ける方法&ダウンロードできる素材…
  5. jQuery

    スマホに使える!3階層のアコーディオンメニューを作りました!
PAGE TOP