CodeRyoku's BLOG

プログラミング教育サービス「CodeRyoku」の公式ブログです。CodeRyokuの講師が、プログラミングの基本のTipsや講座の開講情報など、ゆるく綴っていきます。

公式サイトはこちら

2018-04-08

モバイル志向のウェブサービスをつくろう

written by: ARAKAWA

keywords: プログラミング, Webサイト, レスポンシブウェブデザイン

スマートフォン中心の現代において、モバイル志向でウェブサービスを開発するためのプログラミングスキルは重要です。これについて、実例も含めて簡単にご紹介します。

 なぜモバイル志向か

スマートフォンが登場して何年経つでしょうか。いまや、スマートフォンは情報収集・発信の手段として最も重要なデバイスであるといえるでしょう。いまや、中学生、あるいは小学生ですらスマートフォンを持っている時代になりました。
言うまでもないことですが、私たちのようなウェブサイトやウェブアプリケーションを制作する側としては、従来通りのデスクトップ画面だけを意識した開発ではもはや足りず、スマートフォンを意識する必要があります。意識するというよりは、もはやスマートフォンに向けたウェブサービスの提供がほぼ「マスト」であるといっても過言ではないでしょう。
もちろん、サービスの内容によっては従来通りデスクトップ中心の開発になることもあるかとは思います。とはいえ、コーポレートサイト、サービス紹介サイト、オンライン学習サイト、ブログ、ショッピングサイトなどのECサイト..考えれば考えるほど、大半のウェブサービスはスマートフォン向けである必要があると想像できます。

 モバイル志向を実現する方法

では、ウェブサイト制作において、具体的にどのようにモバイル志向を実現するのでしょうか。端的に言えば、従来通りデスクトップ向けの設計をして実装し、さらにスマートフォン向けの設計をして実装するということになります。簡単に言いましたが、手間をかけてウェブサイトを制作しなければならない、という話になります。モバイル対応サイトを制作するには、大きく2つの方法があります。
1つ目は、デスクトップ用とスマートフォン用で完全に別のサイトを制作し、ウェブサイトを閲覧するデバイスに応じて表示を切り替える方法です。例えば、すでにデスクトップ向けのウェブサイトが導入済みであり、スマートフォン用のサイトも構築したい、という方の向けの選択肢だと思います。
2つ目は、一つのCSSファイルの中でデスクトップ用、(タブレット用)、モバイル用と切り替えられるようにする方法です。CSS3のメディアクエリと呼ばれる技術を使用します。1つのCSSの中でデスクトップ表示とモバイル表示を切り替えられるため、非常に便利な機能です。こういった手法は、レスポンシブウェブデザイン(Responsive Web Design)と呼ばれます。新たな画面サイズのデバイスが登場しても比較的対応しやすいメリットもあります。要件にもよりますが、これからウェブサイトを制作する方には、基本的に後者をおすすめします。あくまで例ですが、実際のCSSはこんな書き方になります。

h1 {
  font-size:24px;
}
@media screen and (min-width: 767px) {
  h1 {
    font-size:42px;
  }
}

これは、h1タグのフォントサイズは24pxであるという通常の指定方法に加えて、画面サイズが767px以上の場合にフォントサイズを42pxとして表示する、というコードを追加したものになります。意外と簡単に記述できるのがお分かりいただけると思います。

 さいごに

ウェブサービスを展開するのに、UX(ユーザエクスペリエンス、ユーザ体験)を向上させることは必要不可欠であり、モバイル志向はその代表格とも言える考え方です。手間をかけた分だけ、デスクトップでも、モバイルでも美しく表示できるサイトが出来上がったときには感動します。面倒と思わず、楽しくウェブサイト制作をしていきましょう。

プログラミングを学びたいですか?
CodeRyokuではプロのITエンジニアによるプログラミング講座、ワークショップを東京、博多、仙台、オンラインで開講しています。オンラインセミナーは全国各地から受講可能です。詳しくは、こちらのページをご覧ください。また、子ども向けプログラミング教室を東京、博多、仙台、大分、オンラインで開講しています。詳しくは、こちらのページをご覧ください。

ブログトップへ戻る

 PROFILE

Kohei ARAKAWA
- System Engineer

宮城県出身のITエンジニア。国内大手IT企業にてシステム開発プロジェクトのプロジェクトマネジメント、複数のWebサイト構築実績。「HTML5レベル1」認定プロフェッショナル等。


 KEYWORDS


 ARCHIVE