読者です 読者をやめる 読者になる 読者になる

フロントエンドとかのこと

HTMLとかCSSとかJavaScriptとかデザインのことを書きます

HTMLを15年書いてる僕が語ってみる vol.2 | ガラケーからスマートフォンへ

HTML 15年シリーズ

前回ご好評いただいたQiitaの投稿、「HTMLを15年書いてる僕が語ってみる vol.2」qiita.com

からひとつ反省をしました。 Qiitaはそもそもコラム的な記事を書く場所ではないのと、"いっぱい読んでもらってもお小遣いを稼げない"ことです。

ということで、ブログを始めることにしました。 恐らくQiitaほどスピーディに色々な方の目に触れることはないかと思いますが、細々とやっていこうと思います。 以下より本題です。

語りたいこと

  1. ガラケー時代のHTML
  2. キャリアの差を埋めるために
  3. スマホ時代の幕開け
  4. 現在のスマホ対応

1. ガラケー時代のHTML

1-1. 僕が見たガラケーサイト

現代のデジタルネイティブと呼ばれる方々には馴染みの薄いガラケーガラパゴスケータイ)、 僕が触れ始めた頃はある程度の完成系だったかと思います。

僕の青春時代には前略プロフや、モバゲータウンなどのコミュニティサービスが大流行りしていました。 現在であれば片手間で作るような重要度のガラケーサイトを、人々はフルパワーで運営していたのです。 スマホのように、若者はいつでもガラケーを手に持っていましたからね。

1-2. 3つの規格

ガラケーサイトのHTMLはとても複雑でした。コツさえ覚えれば簡単ですが。 au、ドコモ、ソフトバンクの3大キャリアは今のAndroidのように仕様を統一せず、 それぞれのやり方でコードを書かなければならなかったのです。

DOCTYPEはバラバラの、XHTMLが標準でした。 共通のDOCTYPEでも問題なかったのですが、機能が制限されるなどの問題がありました。 実際は、制限される機能もそんなに使うシーンがないので、共通でよかったのですが。


2. キャリアの差を埋めるために

2-1. 時代錯誤のもどかしさ

HTMLとは別ファイルのCSSにスタイリングをまかせるのが標準だった時代に、 携帯サイトだけはHTMLタグへインラインスタイルを書く必要がありました。 結局HTMLに見た目の情報を書かなければならなかったことが、もどかしかった思い出です。 auソフトバンクは外部参照ができましたが、ドコモだけはインラインスタイルしか使えなかったのです。 a:hoverなんかはstyle要素内に書く内部参照だけはできましたけど…

もちろんreset.cssは使えないので、

<p style="margin: 0; padding: 0;">sample text</p>

なんて書き方をしていました。

2-2. 横並びレイアウト

これも時代錯誤のひとつですが、横並びレイアウトにfloatを、全キャリア共通では利用できませんでした。 そのため、横並びさせたい一部にはtableを利用していました。 tableレイアウト撤廃!なんて浮き足立っていた世の中には、つらい現実だったと思います。

とはいえ携帯のSEOも捨てられず、最大限のセマンティクスを追求していた思い出があります。


3. スマホ時代の幕開け

3-1. スマホ登場の衝撃

2011年ごろ、長い長いガラケー時代の終焉を予見させる、スマホが登場しました。 iPhoneはそれ以前から販売されていましたが、普通の携帯電話というより、ギークのおもちゃといった風合いでした。 Android系の端末が各キャリアから販売され、iPhoneも3Gまできたところから、 少しずつ普及し始めたように思います。

物理ボタンがほとんどなく、パソコンのように動くそれは、 そんなデバイスに憧れていた僕にはとんでもない衝撃でした。 画面が大きく、PCサイトが見られて、wi-fiが利用できる。 しかもアプリケーションはガラケーよりずっとリッチで、 無料でゲームアプリができたり、夢のようでした。

3-2. スマホサイトへの意識

スマホが普及し始めた当初は当たり前ですが、スマホサイトが少なかったです。 スマホに最適化されたサイトです。 しかし僕自身、スマホユーザーになっていたため、もどかしさを感じていました。 「PCサイトを見られるのは便利だけど、見にくいなあ」なんてことを良く考えていました。

そう感じ始めてから、顧客にはスマホサイトを提案するようになりました。

3-3. スマホ対応の楽しさ

当時はあまりスマホサイトへの知識もなく、色々なサイトを見て周りましたが、 結局かっこいいし簡単だし、という理由でjQuery mobileを採用していました。

今思うとお金をいただいて作っていたのに、jQuery mobileは… という反省でいっぱいです。

ただ、スマホサイトを作るのは無条件に楽しかったことを覚えています。 CSSは使えるし、JavaScriptだって使えます。 インタラクションを制限されたスマホサイトと比べたら、雲泥の差でした。

3-4. ガラケー時代の終焉

スマホが普及し始めてから、加速度的にガラケーサイト制作の依頼が減っていきました。 少し寂しさも感じましたが、「やっとおわった!」という思いがありました。

大体2012年ごろにはほぼ依頼が無くなったように思います。 ガラケーユーザーは点在していましたが、 費用対効果で見ると作る必要はどんどん失われていました。

ここでガラケー時代が終焉を向かえました。


4. 現在のスマホ対応

4-1. 需要

現在のスマホサイトの需要はとんでもないものです。 PCサイトのおまけ的にあった時代とは大違いで、 スマートフォン主体で始まるサービスだって多くあります。 若者はスマートフォンを手に会話し、電車内ではスマホユーザーの嵐。 本当に時代は変わりました。

レンスポンシブなんていう考え方は、ガラケー時代には思いつきもしませんでした。

4-2. ブラウザの差異

スマホサイトはPCと違い、ブラウザの違いをそこまで気にしなくて良いように思います。 大体のことがクリアになっている印象です。

CSS3で様々な表現をできるようになったことから、 スマホサイトでは画像も使わず低容量で素敵なサイトを作ることができるようになりました。 本当に良い時代ですね! 最近はPCもネックになる差異が減ってきましたが。

4-3. 僕の思うベストプラクティス

いくら回線が速くなろうと、スマホサイトの表示速度は慎重にならなければなりません。 僕が現在実践している速度向上施策は

  • アイコンフォント
  • 画像圧縮(画像はほとんど使いませんが)
  • ほぼCSSによるデザイン、インタラクション

などになります。 他にも色々ありますけどね。

中でもアイコンフォントはcolorやfont-sizeで見た目を変更できるのでお気に入りです。 こんなのもありますね。

http://allabout.co.jp/gm/gc/402551/allabout.co.jp


最後に

スマホ時代のおかげでフロントエンドはよりテクニカルに作り込む必要がでてきました。 職業としてそれぞれのスキルが際立つ助けになってくれているので、とてもうれしいことです。

ただやはりHTML書くということの根幹は情報設計や情報伝達に他ならないので、 その点は忘れずやっていきたいですね。

前回の記事と比べるとテーマ的に深く話せることがあまりありませんでしたが、 思い出を振り返っていただいたり、「こんな歴史があったんだ」ということ考えるきっかけに なれれば幸いです。

次回も一所懸命書きますので、是非お楽しみにしてください。

スポンサーリンク