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

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

フロントエンドエンジニアの生きる道

フロントエンドエンジニアは当たり前にHTMLが書けます。

デザイナーの要件も問題なく達成できるのは基本ラインでしょう。
 
その上で極めるべきである道があるので、そこについてお話をさせていただきます。
 

フロントエンドエンジニアはどこで生きているか

僕が思うフロントエンドエンジニアは、サーバーサイドエンジニアとデザイナーの間で生きています。
どちらが求める要件も満たさなければ企画は達成されず、妥協に基づいたプロダクトを作ることになるでしょう。
 
妥協はベネフィットを鑑みると毒でしかなく、できる理由を考えた結果とはベクトルが違います。
 

フロントエンドエンジニアは折衷案のプロである

狭間に生きているからこそ、折衷案によって納得させる力量が必要になります。
デザインは完遂できる前提のため、問題はサーバーサイドとの兼ね合い。
そこは譲歩できるようなスキルが必要になります。
 

譲歩するためには

サーバーサイドの最低限の知識が必要になります。
そのためにはサーバーサイドも含めて、自分が作りたいプロダクトを作ってみましょう。
僕の場合は趣味に即したものでした。楽しいし技術的な利益になります。
 
ただ、サーバーサイドの実装マターで捨てなければならない要件は本当に捨てないといけないかの議論をするべきです。
実装が追いつかないから大事な要件を捨てることはなるべく避けましょう。
誰のために作るプロダクトなのかを考えればその理由は明白です。
 

結局フロンエンドエンジニアが目指すところ

ジェネラリストに近いです。
程遠い未来に見える方は、何かのHTMLを書くことに集中してみてください。
サービスの本質、伝えたいことにマークアップは比例してきます。
 
マークアップを鍛える=マークアップによってサービスが伝えたいことの重要度を考えることになるため、重点的にHTMLを考えて書きましょう。
 
別記事で解説している通り、デザインを再現する言語になってしまったら本末転倒です。
文章を正しく構成するための言語という前提を忘れずプロダクトを作っていれば、道は拓けるはずです。
 
結局何でも情報設計ですね:)

フロントエンドエンジニアのキャリアパス

フロントエンドエンジニアって極めたらどこにいくんだろう? とか最近良く考えます。

周りを見る限り、どこにもいきません。あんまり良い話じゃないですが…

どうしてキャリアパスについて考えたか

僕がフロントエンドエンジニアをちゃんとやりはじめたのが2010年の1月。 そこからひたすらウェブサイトを作ってきました。 2014年まではずっと制作会社で、スピード感とクオリティを求められていました。 割と言われたことをハイクオリティにやれば褒められた世界で、 それが心地良かったのを覚えています。

ある程度の実力がつくと採用に関わったり、教育に関わったりさせてもらえました。 しかし給料はそこまで増えません。一時期はぐっと増えたこともありますが、 相対的に見て増えただけです。

給料を上げるには?

この職業で例えば年収1000万円稼ぐのは至難の技です。 どれだけスキルが付いても、どの会社に入るかの運もありますし、 違う職能をのばしてお金を稼いでいる人がほとんどだと思います。 海外にでも行けば純粋なフロントエンドエンジニアのスキルだけでも稼げるかもしれませんが、 そっちは良くわかってません。

結局転職が給料アップのキーになったりするのですが、 それって根本的な解決になりませんよね。

じゃあどうしたら?

僕が思ったのは、先述の「違う職能をのばす」に注力しようと思いました。 フロントエンドエンジニアのスキルは自分が思うにとても尊いもので、 サービスを作るにあたって大事な部分を担っていると思います。

情報設計、マークアップ、デザイナーのサーバーサイドエンジニアの仲裁?などなど。 多くの知識とスキルを要する職業なんです。会社によりますけどね。

ではどの職能をのばしたら良いか考えたのですが、 僕はデザインだと思いました。

なんでデザイン?

現在のフロントエンドエンジニアは、割とエンジニア色が濃くなっています。 新しい技術をひたすら追い求めて、アウトプットしていく。

ただ、そこに情報設計のスキルはあまり活きてきません。 これまで培ってきたはずなのに。

そう考えるとデザインを身に付ける方がより有益だと感じました。 デザイナーはサービスにおいて大事なことを意識しながら情報設計をしていく 職業なので、そこに辿りつければディレクターなどの道も開けていくんです。

ドラクエシリーズの上級職みたいなものですね。

結論

フロントエンドエンジニアを純粋にやっていたら、一定以上は稼げないと実感しました。 だから僕はデザインを。他にも良い方法があるかもしれませんが、 やってみないとわかりません。

技術を追うのが楽しい時期もありますが、 そうで無くなったとき、新しい道を見つけた方が良い気がしました。

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

前回ご好評いただいた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書くということの根幹は情報設計や情報伝達に他ならないので、 その点は忘れずやっていきたいですね。

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

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

スポンサーリンク