• フロントエンド実装
• コーディング

• HTML
• SCSS
• JavaScript
• php

• WordPress
• Swiper

ローディングアニメーションを初回閲覧時に限って実装。
オープニング（フェードイン）、動画再生、クロージング（フェードアウト）と3つに分けて、それぞれの時間をCSS変数で管理することで動画が変わった際でも、変数の値を変更するだけでフェードインアウトのJS処理が柔軟に出来るように実装。
画像素材、背景にもpng形式の画像を多数配置しており、読み込みパフォーマンスに影響が出ないよう、画質調整などを行いパフォーマンス改善にもなるべく配慮。

• フロントエンド実装
• コーディング
• 画像加工

• HTML
• SCSS
• JavaScript
• php

• WordPress
• Swiper
• ACF
• CPT UI

BtoCで炭の様々な商品を販売されているため、 カスタム投稿とカスタムフィールドで、ブログ更新の要領で商品紹介から購入リンクまでの動線を導入。
メルカリなどの販売ページを直接HPからアクセスすることが可能。

• フロントエンド実装
• コーディング
• 撮影

• HTML
• SCSS
• JavaScript
• php

• WordPress
• Swiper

会社規模が大きくなる段階でのサイトリニューアル、撮影を担当。
旧サイトではなかったお知らせ機能を導入し会社の動きを紹介。過去の情報のままだった事業内容を最新の情報へ更新し、沿革や代表だけでなく実際の幹部社員をサイト上で紹介することで実績ある会社であることをアピール。

• フロントエンド実装
• コーディング

• HTML
• SCSS
• JavaScript
• php

• WordPress
• GSAP

訪日外国人を対象としたサービスのため、テキストは翻訳アプリではなく翻訳者を割当。ニュアンスの違いなどが起きないよう第三者の外国人を交えながらテキスト内容に不備がないよう配慮。
予約をHPからダイレクトに行えるよう予約プラグインを導入。クライアントの要望であった、サービス内容の確認から予約までをシームレスに行えるHPを実現。

• フロントエンド実装
• コーディング

• HTML
• SCSS
• JavaScript
• php

• WordPress
• Swiper

誰でもサイト維持・管理を可能にするために、カスタム投稿を実装し新規車両の登録・更新をブログ更新と同じ要領で実現。
ユーザー目線でもメーカーや車両カテゴリーによって絞り込み検索可能にすることで、ユーザビリティにも配慮。
車両購入や相談の迅速な動線を確保するために、各車両ページから直接問い合わせることも可能。ユーザーと管理する側、双方にとってなるべく無駄なフローを減らすことに尽力。

• コーディング
• デザイン
• 画像加工

• HTML
• SCSS
• JavaScript

• rwdImageMaps

画像やバナー中心の構成のため、テキストの視認性を損なわないことを最大限に配慮しつつ、画像を拡大しすぎてボヤけることもデザイン上避けるために各セクションを細かく調整。
バナーに記載のリンクをレスポンシブで実装するために、クリッカブルマップライブラリーを導入。
問い合わせ時のユーザビリティを損ねないよう、郵便番号を入力することで住所を自動で入力する仕様を実装。

• コーディング
• 画像加工

• HTML
• SCSS
• JavaScript
• php

• rwdImageMaps

印刷会社のCSリニューアル。
初回ローディングアニメーションの導入、製品やサービス紹介だけでなく、SDGs活動などの社会へのメッセージも掲載し、実績・信頼ある会社であることをアピール。

• フロントエンド実装
• コーディング
• 画像加工

• HTML
• SCSS
• JavaScript
• php

• WordPress
• GSAP

遊び心をデザインだけでなくGSAPでスクロールアニメーションも導入し実現。

• フロントエンド実装
• コーディング

• HTML
• SCSS
• jQuery
• php

• WordPress
• ACF
• CPT UI

定期的なメニュー変更をカスタム投稿とカスタムフィールドの導入でブログ更新の要領で実現可能に。感染症対策を抜かりなく実施している点、問い合わせ動線を確保しながら、ヤマビコホルモンのオリジナリティをHPでも実現。

• フロントエンド実装
• コーディング
• デザイン
• ディレクション
• 撮影
• 画像加工

• HTML
• SCSS
• jQuery
• php

• WordPress

系列店まで含めたHP制作から撮影、撮影モデルの準備などディレクション業務も担当。
それぞれの店舗のコンセプトに沿ったデザインから撮影をチームで共有し意識。

• フロントエンド実装
• コーディング
• 画像加工

• HTML
• SCSS
• jQuery
• php

• WordPress
• wow.js
• animate.css

20-30代の若い税理士が所属するこじんまりとした税理士事務所をコンセプトに、士業の緑や青と言った従来のお堅い色ではなく、オレンジや黄を中心とした明るいポップなイメージにし、フォントも丸ゴシックを採用。
ファーストビューには撮影用のモデルではなく、実際のスタッフが揃った写真を大きくスライドで採用し安心感をアピール。

• フロントエンド実装
• コーディング
• ディレクション
• 撮影
• 画像加工

• HTML
• SCSS
• jQuery
• php

• WordPress

画像素材を多用したデザインだったため、画像サイズ調整や画質調整を行い表示パフォーマンスに配慮。
画像のテキストが小さく表示されないよう素材のテキストサイズ調整やレスポンシブ設定のブレイクポイントを部分的に調整し、視認性を損ねない点にも配慮しました。

• コーディング
• デザイン
• ディレクション

• HTML
• SCSS
• jQuery
• php

• WordPress
• wow.js
• animate.css

コロナ禍の真っ只中で、即日HPを納品して欲しいクライアント要望に対応。 時間が限られつつも最低限のデザインと情報、機能面を確保。
演者のプロフィールサイトとしても機能し、今後のサイトの方向性に柔軟に対応出来るようにWordPressを使用。

• コーディング
• デザイン

• HTML
• SCSS
• jQuery
• php

• WordPress

WordPressの市販テーマを子テーマ作成でカスタマイズ。
一部JSライブラリがテーマと干渉するなどトラブルが起きつつも、レスポンシブデザインの実現、スポンサー紹介から選手ページ、試合情報など各ページへの分かりやすくく迅速な動線導入を実現。

• コーディング
• 撮影
• 画像加工

• HTML
• CSS
• jQuery

• WordPress

京都の髪飾りメーカーのCS。
全国で行なっている催事、離れの京町家の紹介、貸出などをHPで周知。頻繁に更新される楽天の販売サイトとデザイン感を統一。

• ECサイト運営
• コーディング
• 撮影
• ディレクション
• 画像加工
• メルマガ作成

• HTML
• CSS
• jQuery

• 楽天GOLD

各商品ページでは、商品の独自性をアピールするために、ただ商品を撮ってアップするだけでなく、開発背景などをヒアリングしページに反映。
提携コンサルとも連携しつつ、イベント前にはセール対象商品の選定、イベント専用ページの作成も行い、ブランディングと顧客周知も抜かりなく行う。

• コーディング
• 撮影
• 画像加工

• HTML
• CSS
• jQuery
• php

• WordPress

定期的なお知らせの更新や、掲載内容変更時のディレクション、コーディングやサイト素材の撮影を中心に従事。
医院の暖かい和やかな雰囲気を見せるために、サイトでは安心感のある緑と丸いフォントを採用し、掲載写真では実際に診療に訪れている親子をモデルにし撮影。
実際の診療の様子を画像で見せることで安心感をアピール。

• コーディング
• 撮影
• 画像加工

• HTML
• CSS
• jQuery
• php

• WordPress

Webサイト作新や更新、参加モデルの撮影、撮影データの現像などを担当。