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デザインのお仕事を始めてなんとか約5年が経ちました。とにかく技術を高めようと思っています。仕事で得た知識やお役立ち情報をご紹介いたします。宜しくお願いします。水彩画を勉強中です。趣味は音楽鑑賞(洋楽)、料理、読書、ブログです。

詳しくはこちら


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

関連記事

  1. Web Design

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

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

  2. Web Design

    作るごとに成長しよう!キュレーションメディアを作るときに気をつけること。

    みなさんこんにちは、mayukouです。仕事でキュレーション風ニュー…

  3. Photoshop

    Photoshop の水彩画ブラシで描いた植物イラストのご紹介

    みなさんこんにちは、mayukou です。肌寒いような暖かくなった…

  4. jQuery

    カードレイアウトにもオススメ!Masonryプラグインの使い方

    みなさんこんにちは、mayukouです。今回は、今流行りのカードレイ…

  5. illustration

    簡単!Illustratorでキラキラ星を作る方法

    みなさんこんにちは。mayukouです。だいぶ秋らしくなってきまし…

  6. Web Design

    WordPressでポートフォリオサイトをリニューアルしました。wordpressで作るメリットとデ…

    みなさんこんにちは、mayukouです。約3年ぶりにポートフォリオサ…

コメント

  • コメント (0)

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

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

CAPTCHA


最近の記事

instagramもやっています

facebook更新中!

スポンサー

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

  1. Photoshop

    Photoshop の水彩画ブラシで描いた植物イラストのご紹介
  2. Web Design

    クライアントに喜ばれる!集客用ホームページを作る手順
  3. Illustrator

    助かった!Illustratorが重たい時の対処方法
  4. Web Design

    作るごとに成長しよう!キュレーションメディアを作るときに気をつけること。
  5. illustration

    混色できる水彩画テイストの表現が可能なipad proアプリ!Tayasui S…
PAGE TOP