【デザイン・コーディング】架空のWeb制作会社（自主制作）

Taichi Kadowaki
フロントエンドエンジニア（Web制作寄り）をしてました。
OVERVIEW

自主制作の作品です。前職での実績で見せられるものがほぼないため、前職での経験をできるだけ活かした作品にしました。

YEAR 2020

URLはこちら（または画面右下の「WEBSITE」から）
https://www.kadot.work

ソースコードや開発環境はこちら
https://github.com/kadocho12/pwc

使用技術は現在のページの「Tools & topics」をご覧ください。

--------------------------

■この作品で自分がしたこと

  • 全部（CMS組み込みはしてません）

--------------------------

■開発環境

  • CSS：BEM（カスタマイズしてる部分もあります）とSass（Scss）を使用したFLOCSSでCSS設計
  • HTML：Pugによるレイアウトやコンポーネントに分割した実装、_config.pugでページ情報管理、条件分岐、繰り返し処理など
  • JavaScript：webpackやbabelを使用した開発、ES6を使用して機能ごとにファイル分割（あまりプラグインを使わずに実装）、jQueryなど
  • タスクランナー：npm-scripts

--------------------------

■使用テクニック

  • ネガティブマージンを使用した要素の配置（例えば、カード型コンポーネントを並べて折り返しが発生する時に崩れないように）
  • タブレット以下の時は、ホバーアニメーションを無効
  • テキストの行高を無効にして余白を調整しやすくする方法を使用（https://yuyakinoshita.com/blog/2020/01/20/line-height-crop/ を参考）
  • 電話番号をスマホ時のみ反応させる
  • 見出しのみYaku Han JP適用（本文に使うと読みづらくなるため）
  • ハンバーガーメニューでの「WAI-AIRA」使用（aria-expandedとaria-controls）
  • カード型コンポーネントの要素順（画像を一番上にすると読み上げ時に、見出しより先に画像のaltが読み上げられてしまう。orderで順番を入れ替え、見出しを先に読み上げるよう工夫）
  • フォントサイズを相対指定（fontSizeというmixinを作成し、計算を楽にしてます）
  • など


WEBSITE