Coding
HTML
CSS
JavaScript
jQuery
- 制作期間
- 約5ヶ月
- 動き
- スライダー・ハンバーガーメニュー・タブ切替
- こだわり
- スクロールや操作の流れに合わせた動きを設計し、サイトの閲覧体験を高める実装にこだわりました。機能ごとに処理を分け、保守・拡張しやすい構成を意識しています。
Coding
HTML
CSS
JavaScript
jQuery
- 制作期間
- 約3週間
- 動き
- ドロワーメニュー・スライダー・ページネーション
- こだわり
- 操作に合わせてスムーズに変化する動きを設計し、直感的に使えるUIを意識しました。ドロワーメニューの共通処理など、機能ごとに処理を整理し、保守しやすい構成にしています。
Coding
HTML
CSS
JavaScript
jQuery
- 制作期間
- 約3週間
- 動き
- モーダル・アコーディオン・スライダー
- こだわり
- BEMを用いてクラス設計を整理し、ページの追加や仕様変更にも対応しやすい構成を意識しました。
Coding
HTML
CSS
JavaScript
jQuery
- 制作期間
- 約3週間
- 動き
- ハンバーガーメニュー・タブ切替
- こだわり
- 複数の下層ページへ情報を整理して展開できる構成とし、必要な情報へ迷わずアクセスできる導線を意識しました。BEMを用いてクラス設計を整理し、ページ追加や仕様変更にも対応しやすい構成にしています。
Design
Figma
- 制作期間
- 1日
- こだわり
- FigmaのデザインカンプからFigma to studioのプラグインを使用してStudioでサイトを完成させました。
Design
Figma
- 制作期間
- 1日
- こだわり
- 修正がスムーズにできるように、テキストスタイルとカラースタイルを設定し、全てのsectionにオートレイアウトを使用しました。
Design
Figma
- 制作期間
- 1日
- こだわり
- 文字とアンダーラインにオートレイアウトを使用し、文字が変更になっもレイアウトの修正が必要ない設定で作成しました。
Design
Figma
- 制作期間
- 1日
- こだわり
- 情報設計や機能性など、ユーザー側にも配慮したデザイン。キャッチコピーに縦文字を使用。
Design
Illustrator
- 制作期間
- 1日
- こだわり
- グラデーション、ドロップシャドウを使用し文字の見やすさを考慮しました。
Design
Photoshop
- 制作期間
- 1日
- こだわり
- 情報設計や機能性など、ユーザー側にも配慮したデザインを心掛けてバナーを作成しました。
Design
Illustrator
- 制作期間
- 1日
- こだわり
- パスの分割でパーツを作成。共通の部品は併用し、デザインにブレがないように作成しました。
Design
Figma
- 制作期間
- 1日
- こだわり
- Figmaで複雑なアニメーションを組み合わせた動きのあるファーストビューを完成させました。