vocab

web

  • Adobe Illustrator

  • Figma

  • HTML

  • CSS

  • JavaScript

  • PHP

ITパスポート試験の学習用に作成した単語帳サイトです。検索や絞り込み、お気に入りなど、必要な単語を探しやすく、繰り返し学習しやすい使い勝手を意識して設計しました。学習用のツールとして使いやすくしながら、近未来の電子機器を操作しているような世界観を取り入れ、機能面だけでなく触っていて楽しめるサイトを目指しました。

  • 重なりと動きでつくる電子画面

    近未来の電子機器を操作しているような雰囲気を出すため、プログラムの文字列やグリッド、ドット、走査線など、性質の異なる要素を重ねて背景を作りました。
    それぞれの動く速さや方向を少しずつ変えることで、一枚の画像や動画を置くだけでは出しにくい奥行きと電子的な質感を加えています。
    常に複数の動きが続く画面になるため、サイトへの負荷も考えながら、動かす量や速度を調整しました。

  • カードに組み込んだSVG回路パーツ

    各単語カードの端には、電子回路をモチーフにした複数のSVGパーツを作り、カードごとにランダムな組み合わせで表示しています。
    細い線がぼやけにくいよう、グリッドを基準にアンカーポイントを整数値へ揃えながら形を調整しました。
    また、SVGとして組み込むことで、画面の状態に合わせて線の色も切り替えています。
    同じカードが並ぶ画面でも少しずつ表情が変わるよう、装飾そのものを画面の仕組みの一部として扱いました。