福岡でコーディングしてきた経験、WebP化、display:gridの採用など

Joint Designとして、コーディングから、WordPressなど cmsの構築も数多くしてきました。
このページでは、コーディング経験からあれこれのお話をたっぷりしていきたいと思います。

目次

コーダー経験

2015年デジタルハリウッド福岡校（現・デジタルハリウッド福岡STDIO）を卒業。
その後、医療関係のweb制作を行う会社で勤務。
WordPressの構築や、scssなど使っていた頃から、そのスキルを活かして制作作業にあたっておりました。

その後フリーランスとして独立、Joint Designという屋号をつけて、数多くの制作を行ってまいりました。

これまでコーディングしたサイトですが、
大手企業のリクルートサイト、学校関係や行政関係のものから、ベンチャー企業サイト、個人のスクール、カフェなどコーディングしてきたジャンルは多種多様です。

最近の CMS 構築の傾向

最近感じるCMS構築の傾向として、クライアント様ご自身でページを作成したり、修正対応ができるような仕様を要望されるケースが増えているように感じます。

実際にこのページもブロックエディタでページを作っておりまして、HTMLを一から書くような仕様ではございません。
WordPressに限らず、baserCMSにもBurgerEditorというコンテンツブロックでページを作るものが用意されたりしております。

また、クライアント様がページを更新する際、画像サイズが大きいものを入れてしまいがちですので、ブラグインなどを導入に、自動で圧縮、軽量化できる仕様にするケースも増えております。

ちなみにWordPressで構築する際は、オリジナルのテンプレートを作成しております。

軽量化できる画像フォーマット「WebP」の活用

案件にもよりますが、表示スピードをなるべく早くと考え、圧縮率が高く、高品質な画像を提供することを目的とした画像フォーマットWebPも積極的に採用しております。

ページが重いサイト、特にスマートフォン観覧時には離脱してしまう要因になってしまいます。
ユーザーに優しく、フレンドリーなサイト作りには目指しております。

以前は、JPG、PNGの画像を変換ツールを利用してWebP化しておりました。
こちらのサイトなど、利用しておりました。

ここ最近では、Adobe Illustrator、Adobe Photoshop、Adobe XDほかWebデザインで使われるソフトでWebPの書き出しが標準装備されるようになりました。

*追記
Adobe Illustrator等WebP書き出しはできるものの、データ量が重い画像になってしまうケースがありました。書き出し設定の見直しをすればいいのかもしれませんが、jpg、pngで書き出して、上記記載のサイトなどで、WebP化した方が今のところ間違いなさそうです。

デザインデータの傾向

コーディング業務において、長い経験がありますが、お仕事で提供されるデザインデータには特定の傾向があるように感じます。これは、取引先の要望や選好にも影響されるとは思いますが・・・。

以前は、Adobe Photoshopで作成されたデザインデータが主流であると感じていましたが、Adobe XDの登場以降、Adobe XDでのデザインデータ提供が増えました。さらに、Adobe Illustratorを使用したデザインデータも多いように感じます。

中には、Adobe Illustratorで提供されるデザインデータを受け入れがたいと感じるコーダーもいるようですが、私はどんなデータでも歓迎します。それぞれのツールに適した方法でコーディングを行うことができるため、柔軟性が重要だと考えています。

ただし、Adobe XDの開発が終了し、今後はFigmaでのデザイン制作が増加する可能性が出てきております（2023年10月現在）。Figmaで制作されたデザインに対するコーディング経験もございます。

デスクトップフルスクリーン向けのデザインにおいて、効率が低下する傾向

さまざまなデザインデータが提供され、それらをコーディングする際に、特に問題となるのはデスクトップPC向けに1920pxでデザインされたデータです。デスクトップPC上では問題ありませんが、ノートPCで閲覧した際に、テキストが大きすぎたり、コンテンツが画面幅に収まりきらなかったり、表示が崩れてしまうことがあります。

この問題の一因は、デザイン段階でノートPCでの観覧を想定してないからでもあります。デザイナーの閲覧環境に依存するため、気付きにくい点ではありますが。

最善のアプローチとして、デザイン段階で、ノートPCでの閲覧を想定して、幅980pxから1200pxまでの範囲でデザインを行い、それ以降のフルスクリーン表示にも対応する設計が最適なのかな〜と。最小デバイスに焦点を当てて設計することで、最大デバイスへの対応がより効率的に行えると思います。

そういった意味で、いろんなデバイスでも可変して気持ちよく見れるWebデザインの設計って大変なところはあります。

スマホ向けのデザインにおいて、効率が低下する傾向

スマートフォン向けデザインにも、上述の問題が同様に影響を及ぼしています。最新のデバイスでは、393pxから430pxの範囲のサイズが一般的になり、その幅に合わせたデザインが増加しています。しかしながら、まだ多くのユーザーが375pxの幅を持つスマートフォンを使用しており、393pxで設計されたデザインは375pxの画面では適切に表示されないことがあります。

この問題も、最小サイズのスマートフォンでのデザインを考慮して制作するのが望ましいと考えられます。

コーディングで使用しているエディタ PhpStorm

コーディングをする上で必要不可欠なのが、テキストエディタなのですが、僕は有料のテキストエディタを使っております。
もう5~6年使っているもので、JetBrainsが提供しております、PhpStormというエディタです。

無料エディタの多くがプラグインと呼ばれる追加機能をいくつか追加して使用するのですが、PhpStormでは標準で高機能なエディタになっております。

テキストの補完はもちろん、エディタ内でFITサーバーにアクセスできたり、GITも使えたりと効率のいいコーディング環境を実現してくれております。

一度使うと、もう離れられないエディタですね。

実際のコーディングフロー

デザインデータを頂いてからのコーディングフローですが、

  • 使われているフォントの確認
  • フォントカラーの確認
  • HTMLから書いていく

大まかは、以上の順で進めていきます。

使われているフォント、フォントカラーの確認

まずは、フォントの種類、カラーを確認。
scssの変数として利用し、汎用性高いものにします。
たくさんページを作ってから、フォントやカラーを変数化して、汎用させるのは大変になりますので、ここの部分はコーディングの最初に必ずやります。

HTMLから書いていく

とにかく、HTMLから書いていく。

当たり前のことですが、頭からフッターまでとにかく、HTMLで書きます。1ページまるっとHTMLを書いて、少しずつcssでスタイルをあたることはしております。
というのも、HTMLだけを書くことで、ページ全体の構造を把握し、共有化されそうな見出しやボタンなども把握することができます。

パーツを最初に作ってという手もあり、この方法も用いるのですが、デザインデータが全ぺージ最初から渡してもらえることは少ないです。
トップページから、下層ページが小出しで頂くことが多く、どのパーツが共有化できるものなのか把握が難しい場合もあります。

ですので、HTMLから書いていき、共有化されることも想定していきながら進めていきます。

ちなみに、全ページデータを頂ける場合は、見出しやボタンほか、パーツ化できるものをとにかく作ります。パート.htmlみたいなページを作ってパーツのみ作ったりします。

CSS、スタイルをつけていく時に気をつけていること

パート化の話にも関連するのですが、マージン（余白）を持つものと、マージンを持たないものにパーツと分けます。

例えば、ボタンをスタイリングする時、マージンはつけません。
マージンをつけてしまうと、どこのページで使ってもそのマージンが固定でついてしまい汎用性がなくなってしまいます。

ですので、見出しやボタンなど、どのページでも使えるものは、マージンをつけないようにしています。

ボタンにマージンをつけたい場合は、例えば、ボタングループや、ボタンリスト、ボタンブロックなど外に囲うもの作って、それにマージンをつけるようにしております。

display: gridの導入

2023年よりdisplay: gridというプロパティを導入しております。
要素をグリッドコンテナとして表示するためのもので、要素を簡単に格子状のレイアウトに配置することができます。

それまでは、今のWebサイトとよく多様されている display: flexを使っていたのですが、display: gridを導入に使い分けて効率化を図っております。

display: gridのメリット

display: gridのメリットとして、親要素のプロパティ指定で、子要素に反映される点。
flexに比べると記述が減り、効率的であることを感じております。

flexとの兼用

flexは、シンプルな水平または垂直の並びで十分な場合、1次元でのレイアウトにはとても便利。
ボタン１つを中央配置に。とか、グローバルナビゲーションを横並びに、などシンプルなレイアウトにはとても使いやすいので、gridを併用に使っています。

ロリポップのハイスピードプランでWordPressの表示が早くなった

WordPressなど、CMSを入れるとどうしても表示スピードが遅くなってしまいがち。
テスト環境でロリポップのサーバーを借りてるのですが、スタンダードプランだったものをハイスピードプランに変えたところ、あからさまに表示が早くなったのがわかりました。
きっかけは、制作したサイトなんですが、クライアントがロリポップを使われていて、ハイスピードプランをお勧めして、表示が速いと感じたことがきっかけでした。

もし、ロリポップでサーバー契約を考えている方はハイスピードプランを検討するのも良いかもしれません。

さくらインターネット、XserverほかWordPressの表示が速いプランもあると思います。選択肢の一つとして考えてもいいのではないでしょうか。

コーディングをする上でのやりがい

デザインデータから意図を汲み取り、HTMLを書き、CSSでビジュアルを再現していく。
このコーディングされたwebサイト、ページがクライアントの情報発信のためになっている。

また、CMSを考えてのコーディングをすることで、メンテナンス性が高く、汎用性高いものにすることで長く使えるwebサイトの構築をする。

世の中のためになることを仕事で貢献する喜びがやりがいになっております。