ビジョンへの実現の歩み

自分のビジョンは昔から
「新たな世界を切り開く」
というものでした。

このビジョンは、
「ヒトが文明を発展させてこられたのは、まだ見ぬ世界への好奇心を忘れずに挑戦を続けてきたからであり、自分もその心は忘れたくない」
という考えから生み出されたものです。

また、自分はモノづくりが昔から好きで、それを活かした仕事に就きたいなと常々思っており、現在はサイトのコーディングを主軸にデザインも少し手掛ける、といった業務を任されています。

そういったビジョンと仕事内容を踏まえた上で考えると、自分ができるのは
「新たな技術を積極的に導入する」
事だと思っており、業務でもそれを意識するようにしています。
今月は、その新たに取り入れた技術を紹介しようと思います。

SCSSと呼ばれる言語の導入

これはサイトの見た目を定義するCSSをさらに柔軟、かつ高速に記述するための言語であり、この導入により指定が散らかりがちな「間隔」「文字サイズ」「色」といったプロパティから、「カード型UI」「リスト型UI」といった粒度の大きなパーツまで、最初に決めたルールに則った指定が可能となり、サイト全体での統一感の維持に役立っています。

逆にこの言語がないと、様々な機能追加を頻繁に行うPandoのようなサイトでは、管理が今以上に大変で工数も嵩んだだろうなと思っています。

CSSアニメーションを利用した各機能の実装

古い知識だとWebサイトに動きを付ける＝Flashと考えがちでしたが、数年前からその流れは完全に廃れ、今ではCSSでのアニメーション付けがスタンダードとなっています。
Pandoにおいても名刺交換、ビジョンリマインダー機能などで動きを付ける機会が増えてきており、CSSでの実装を行いました。

自社開発の案件についてはあまり重要視してこなかった部分ですが、スマホアプリなどと比較してしまうとどうしても単調になりがちです。
そこに、CSSアニメーションを加えることで、よりアプリライクなサイトにできるのではないかと思っています。

アイコンにWebフォントを用いる

こちらも昔の技術から新たな技術に乗り換えた事例となります。

アイコン等は、少し前であれば、小さな画像ファイルを大量に用意し、逐一それを読みだすことで表示させる手法が取られていました。
しかしこれは、画像の数だけHTTPリクエストが増加し、その分表示速度が低下するという問題がありました。

その後、CSSスプライトという、アイコンを全て集めて1つの画像にして、CSSで一部を切り抜いて表示することで、アイコンの種類は保ちつつ、HTTPリクエストを1つに抑える手法が現れました。
少し前の美容医療の口コミ広場においてはこの手法をとっていました。
ですがこれも、高解像度のスマートフォンに対応しにくいなどの問題を含んでおり、根本的な解決策にはなり得ません。

そこでここ最近注目して導入しているのが、Webフォントの仕組みを応用したアイコン類です。
これはSVGという、解像度に依存しない軽量のファイル形式でアイコンを作り、一つのフォントとしてまとめて読み込ませ、表示したい箇所に「文字のひとつ」として呼び出すという方法です。
カラフルで複雑なアイコンには向いていませんが、フラットデザインの流行でアイコン自体をそこまで目立たせる事はなくなったため実現できた取り組みです。

このように、日々の業務の中にビジョンを意識した行動を取り込むことで、仕事とつながりをもちつつ実現へ近づけるのではないかなと考えています。
それぞれの技術について、詳しい解説はまた別の記事でできたらいいなと思っています。