自分語り？

やまもとです。

早くもネタが尽きてしまったので、
本日はやまもとのお仕事について書きます。
（本当は、タイムマシン問題やバタフライエフェクトやフェルミのパラドクスやモンティ・ホール問題について書いていたのですが、内容が広がりすぎて収拾がつかなくなったのでボツになりました）

やまもとは普段、ナップのwebページの作成をしております。
HTMLとCSSとjavascriptやjQueryなんかを駆使して、時々phpやAPIを使ったりしています。
昨今のスマートホンによる閲覧割合の上昇に伴い、レスポンシブデザイン化したりしています。

車で例えるなら、
HTMLがパーツ（ボンネットやバンパー、ボルトやホイール、タイヤなどの部品）
CSSがデザイン（大きさやレイアウト、色を決めたり）
javascriptなどがエンジンや組込みシステム（キーを回したらエンジンスタート、シフトレバーでRが入ったら後退、このボタンを押したらパワーウィンドウ）
APIがカーナビやカーステレオ（車自体の機能ではないけど車を便利にするための機能）

といったところでしょうか。
やまもとは、それぞれの機能を実装するための作業指示書を、それぞれの言語（HTMLが英語、CSSがフランス語、javascriptがイタリア語みたいな？）で書いています。

<!--ここまではプログラマ的なお仕事です。-->
/*ここからはデザイナー的なお仕事です*/

また、バナー画像を作成したり、webページの視認性・可読性・デザイン性などを考慮して、PNGなどのラスター画像をSVG（ベクター画像）に変えたり、JPEG画像の解像度や圧縮率をweb閲覧に適したものにしたり…

とにかくいろいろしています！

【巻末付録①：web開発でよく使われる言語・用語解説】
●HTML
HyperTextMarkupLanguageの略称です。
ハイパーテキストをマークアップするための言語です。
<a>ほげほげ</a>のように、ほげほげを<？>～～～</？>の記号で囲んで特別な意味を持たせることをマークアップと言います。
例えば、始端を<a>、終端を</a>で囲めば、囲まれたその範囲は実際のwebページではハイパーリンクという性質を持って、他のページにジャンプできるようになります。

<a>～～～</a>で囲むとハイパーリンク
<h1>～～～</h1>で囲むと見出し
<p>～～～</p>で囲むと段落

みたいな感じで、<>内に入るキーワードによって持たせられる意味が変わってきます。これをいい感じにgoogleに理解してもらうように頑張るのがSEOです。

●CSS
CascadeStyleSheetsの略称です。
HTMLで記述された文書の装飾を行います。
太古の昔は、骨組みも装飾もHTML一本でやっちゃおう！みたいな風潮があったのですが、それだとコード（命令文）が煩雑になってしまうんですね。
これはプログラマあるあるなのですが、自分で書いたコードを半年後見たら何書いてるのかさっぱりわからないんです。だからプログラマは半年後に見てもわかるように、できるだけわかりやすくコードを書こうとしたがります。
なので最近の流行りは、HTMLで構造を書いて、CSSでそれを装飾！です。
これなら半年後に構造を直したい場合はHTMLを、色を変えたりしたい場合はCSSを見ればいいので直すところが明確にわかります。

●javascript
よく混同されるjavaとは似て非なるものです。
javaはコンパイラ言語、javascriptはインタプリタ言語です。
javaはサーバサイド言語、javascriptはフロントエンドの言語です。
javaはオブジェクト指向型言語、javascriptは手続き型言語です。

……なんのこっちゃですよね！

更にいうと上の比較は半分合ってて半分間違ってるみたいなところもあるのですが、
名前が似ているだけで全然違うモノということです（適当）

●SEO
SearchEngineOptimizationの略称です。
webページはもともと、ブラウザ上部のアドレスバーにアドレスを打ち込むことで対象のページを閲覧するものでした。上の方に表示されている「https://aaa.com/」みたいなやつを入力したら、それに対応するページが表示される寸法です。死ぬほど面倒ですね。
あまりにも面倒すぎたので、キーワードを入力したらそれに近そうなページを出してくれるページが作られました。yahooとかgooとかMSNsearchとかBingとか百度（バイドゥ）とか……そしてgoogleなどの「検索エンジン」です。
google検索は、簡単に言えばgoogleのロボットがあらかじめありとあらゆるwebページを巡回して、各々のページがどんなページかを自動的に判別しています。私たちユーザーが知りたいキーワードを入力することで、googleが「これが知りたいんでしょ？？」っていう情報が掲載されているページをリストアップしてくれているわけです。
SEOは、google先生に気に入られるようなwebページの作り方をして、google検索に引っかかりやすく（最適化）することです。
本当はgoogle検索以外の検索エンジンに対して最適化することもSEOと呼ばれるのですが、googleのシェア率があまりにも高すぎてもっぱらgoogle検索に対して最適化すること＝SEOみたいな風潮があります。

●レスポンシブデザイン
PCで閲覧しても、スマホから閲覧しても同じように表示されるようにページのデザインを調整すること……ではない。
PCで閲覧した場合はPCにあった画像の大きさや余白のとり方、スマホで閲覧した場合はスマホに適した文字の大きさやコンテンツの配置などなど、閲覧環境によって最適な表示をユーザーに提供できるようにwebページをデザインすることです。

【巻末付録②：（web）デザインでよく使われる用語解説】
●JPEG/PNG/GIF/SVG
どれも画像データの形式の名前です。
それぞれに長所と短所があり、表示速度が閲覧のモチベーションに影響するwebでは、それぞれの特長を理解して使い分ける必要があります。

①JPEG
JoinPhotographicExpertsGroupの略称です。
写真などの段階的に色調が変化する画像データの扱いに強い反面、
イラストやロゴなど、色と色との境界面がはっきりしているような表現は苦手です。

②PNG
PortableNetworkGraphicsの略称です。
高画質な割にデータサイズが大きくなりにくく、
更にアルファチャンネル（透明情報）まで保持できるスグレモノです。
ただ、後述するSVGの出現により、若干オワコン化しつつある気がします。

③GIF
GraphicsInterchangeFormatの略称です。
表現できる色数が少ない代わりにサイズがとても軽量で、透明情報まで保持できるため、インターネット黎明期には多く使われましたが、PNGによって駆逐されました。
しかしながら、GIFアニメ（静止画像を切り替えて表示させることでアニメーションさせる機能）を備えているため、しばしば使われることもあります。また、PNGを使わなくてもいいような、ごく小さな単純な画像などには使われることがあります。

④SVG
ScalableVectorGraphicsの略称です。
上記3つの形式がラスター画像であるのに対し、
SVGはベクター形式の画像フォーマットになります。
閲覧環境の解像度の違いによる画像の粗が出ないため、
ロゴマークやアイコンなどの用途に適しています。
レスポンシブデザインに非常に強いです。
ただし、グラデーションの多い画像をSVGで表現しようとすると非常にサイズが大きくなるため、写真データの場合はJPEGに軍配が上がります。

●ラスター／ベクター
どちらも画像の表現方法ですが、
ラスターは画像をドット（点）の集まりで表現するのに対し、
ベクターは画像をベクトル（向きと長さの割合）で表現します。
ラスター画像は拡大すると粗が目立つのに対し、
ベクター画像は拡大しても一切粗が出ません。
（厳密には少し違いますが）例えるなら、ラスターがスーパーマリオブラザーズとかのドットのマリオ、ベクターがスーパーマリオオデッセイの3Dで表現されたマリオです。

●解像度（dpi）
DotsPerInchの略称です。
画像の緻密さを表す単位で、1インチ（約2.5cm）の中に点が何個入るかを示しています。例えば、10dpiの場合は、縦10マス、横10マスの方眼用紙の■を塗りつぶして絵を書くような感じです。
これだとめちゃくちゃ粗い絵になりますよね。
これが350dpi（製本などでカラー印刷をするときの解像度です）だと、
とてもきめの細かい絵になります。

【巻末付録③：ホームページ・webページ・ウェブサイトの違い】
●ホームページ
ホームページはホームのページです。
つまり、誰かのお家というニュアンスが込められています。
「ナップファクトリーのホームページ」はweb上におけるナップの拠点というわけです。
企業や団体・個人が管理しているwebサイトのことをホームページと呼びます。

●webページ
webページといった場合、WWW上に存在するすべてのページそれぞれのことを指します。
狭義的かつ一般的にはgoogleのクローラーで巡回できたページ（＝一般人が閲覧することのできるページ≒表層web）のことを指し、その数はなんとおよそ16億です。google検索でたどり着ける可能性があるページが16億あるということです。

しかしながら、これはWWW全体の1%未満と言われています。
残りの99％はなにかというと、深層webとかダークウェブなどと言われるものになります。深層webとダークウェブは厳密には違うもので、顕在化してないwebサイトを深層webと呼び、その中でも違法な物品の売買や犯罪行為、サービス等を行っているもの、をダークウェブと呼びます。N○rtonなどのアンチウィルスソフトの広告で不安を煽る目的でヘビロテされているやつです。

●ウェブサイト
日常会話ではホームページ・webページと同義に扱われますが、ウェブサイトはwebページの集合のことを指します。「ナップのウェブサイト」といった場合、板金のページや塗装のページ、DIYのページなどをすべてひっくるめたものを指します。「ナップのホームページ」と概ね同じ意味になります。

やまもとでした。