スタッフブログ Staff Blog

PostCSSを用いた作業効率化の事例紹介

案件概要

下記のような現状のサイトをスマートフォン対応(マルチスクリーン対応)したいとのご要望で、コーディングのみのご依頼です。

  • 画面上部にグローバルナビ、画面中央の右側にローカルナビを配置したオーソドックスな企業サイト
    • ページ数は100ページ以上
    • ナビゲーションはテキストとCSSでスタイリングされている
  • コンテンツ内容(グループ)毎にCSSが準備されスタイリングされている
    • コンテンツ内容(グループ)内ではモジュールが整備され、ページ間で統一した見栄えを提供している
  • .scssファイル等の提供はなし

対応

サイトを拝見したところ、最近ではレスポンシブWebデザインを採用してマルチスクリーン対応するところをPCのみ対応で制作したという状況のようです。モジュール(コンポーネント)のデザインは今でもよく見かけるものばかりで、マルチスクリーン対応のために全面リニューアルする必要は全くなさそうです。

よって、既存のCSSに手を入れる、具体的にはメディアクエリを利用してスタイル付けを行っていくことにより、さまざまなスクリーンサイズに対応することになります。(もちろん、モジュールのデザインによっては部分的に新たなデザインを検討する必要はあるでしょう。)その際の課題として、以下の2点が考えられます。

  • .cssファイル数が多い
  • .scssファイル等の提供がない

このまま.cssファイルを編集していくか、それとも.scssファイルに変換して編集していくか検討しましたが、どちらも負荷のかかる作業です。そこで、今回はCSSパーサーである「PostCSS」を利用して、既存の.cssを活かしつつ作業の効率化を図ることにしました。

具体的には、以下のPostCSSプラグインを導入しました。

これにより以下の利点がもたらされます。

  • 変数(CSS Custom Properties)がどのファイルでも利用可能になる
  • custom media queriesを利用することでメディアクエリが管理しやすくなる
  • CSSセレクタ毎にメディアクエリを利用してスタイルを記述することができるようになり(既存のセレクタ内にネストして記述できる)、また最終的に「CSS MQPacker」がクエリ毎に設定を集約してくれる
  • 最新のブラウザ環境に合わせてベンダープレフィックスの整理が行われる

まとめ

PostCSSを利用して新しいCSSの仕様や有益な処理を取り入れることにより、容易に作業の効率化を図ることができました。現在のCSS構成を変えることなく利用するので、あるページに設定したスタイルが他のページに悪影響を及ぼし始めた、ということを防ぐことができます。

案件に合わせて最適なツールを選択し利用していくことで、提供する作業の品質を向上させていきたいと考えています。

「HiBiS特別セミナー『逆説のIA/UXデザイン』」に参加して

HiBiS(広島インターネットビジネスソサイエティ) UI/UX研究部会の主催により2017年3月24日(金)に広島市で開催された「HiBiS特別セミナー『逆説のIA/UXデザイン』」に参加してきました。講師は書籍「IA/UXプラクティス モバイル情報アーキテクチャとUXデザイン」などを執筆されたネットイヤーグループ株式会社の坂本 貴史さんでした。

フロントエンド・エンジニアである私ですが、「使う人がうれしいと感じるような体験を実現する製品やサービスを作ることを目指したデザイン方法論(「UXデザインの教科書」より引用)」である『UXデザイン』に興味を持っており、書籍『UXデザインの教科書』を読むなどして基礎知識やプロセスを学んできていました。

そんな私にとって今回のセミナーで坂本さんが紹介された下記3点の逆説は非常に驚きでした。

  • UX をビジネスに導入する必要はない
  • ペルソナを作成する必要はない
  • カスタマージャーニーマップは必要ない

しかしながら、坂本さんはUX導入の目的やプロセス、またペルソナ法やカスタマージャーニーマップなどの手法を分かりやすく解説してくださったことで、前述の逆説を理解することは非常に容易でした。

また、既存のビジネスでは『逆引きのUXデザインプロセス』を用いて現状分析を行うことにより、顧客ロイヤルティの向上・全体最適化を図ることができることを学びました。

カスタマージャーニーマップなどは最近web業界内で流行っている言葉の一つではないかと思いますが、プロセスや手法の本質・視点を忘れることなく利用し、私が接することの多い既にビジネス・サービスを運営されているお客様の課題を解決していくことに注力していきたいと感じました。

講師の坂本さん、UI/UX研究部会長の藤本さん、ありがとうございました。

スタッフの誕生日会。

3月12日生まれのスタッフの誕生日会を3月14日に行いました!

今回はLABの休憩室でホットプレート焼肉。

知人が「油の飛び散りもニオイも少なかった」とホットプレートの写真をFacebookにアップしておられたので「コレだ!」と思い購入。

準備と片付けには少々手間がかかるけれど、好きなものだけ食べられて移動もしなくて良いので、外食よりコスパが良かったです^^

そしてバースデイケーキは、優弥くんが前から何度か美味しいと言っていたベイクドチーズ。

見た目が地味なのでちょっと迷いましたが・・・私も食べてみたかったのでこれにしました^^

濃厚で美味しかったです。

そして恒例の記念撮影。

今年も無事にお祝いできて良かった♡

春をさがしに。

この週末は天気も良く、暖かかったので、広島県府中市にある府中公園へ行ってきました。

ここは桜の木がたくさん植えてあって、お花見シーズンには多くの人が訪れる、地元ではちょっと有名なお花見スポットです。

あと1ヶ月もしないうちに満開になるであろう桜の蕾は、どれもまだ固く閉じていました。

せっかくなので他に咲いている花はないか、園内をふらふら〜っと探索。

するといくつかの花に出会えました。

↓これは梅かな?

↓これは寒緋桜(カンヒサクラ)。看板がかかっていました。

↓ポツリと咲いたこれは何かな〜?

↓お馴染みのオオイヌノフグリもありました。

冬の間は寒くて引きこもっていましたが、これからはお出かけするのが楽しくなりそうです。

桜の写真はまた来月!

ランチミーティング。

不定期で開催しているLABのランチミーティング。

今日は福山駅(さんすて)の中にある『おひつごはん四六時中』へ行ってきました!


駅までは会社から歩いて5分程度。

お正月に3日連続で10,000km以上歩いたので、このくらいの距離を歩くのは平気になってきました。
(むしろみんなで歩くと楽しいと思える距離。)

ランチミーティングの食事風景

私が注文したのは特盛うにの海鮮にぎわいおひつごはん。
『店長おすすめ』(と表の食品サンプルに書いてあった)だけあって、コレはなかなか良かったです。

特盛うにの海鮮にぎわいおひつごはん

午前中は進行中の案件のミーティングをみっちりやったので、ランチでは主に旅行やフィットネスクラブなどの気楽な話を。

今年もまたどこか社員旅行に行きたいなーと思っています。

お問い合わせ Contact

制作のご依頼、ご相談などは下記のフォームからご連絡ください。