WORKS

デザインカンプからのコーディング

デザインカンプからのコーディング
URL
http://naho-web.conohawing.com/engress/
制作期間
2~3週間(作業時間89時間)
担当
コーディング・ WordPress化
実装内容
【JS】 ・ハンバーガーメニュー・スクロールヒント・アコーディオン 【WordPress】 ・通常投稿・おすすめ記事と関連記事、カテゴリー一覧表示・ページネーション・お知らせページのカスタム投稿(Custom Post Type UI)・ TOPページと料金ページのカスタムフィールド(ACF)・パンクずナビ(breadcrumb navxt)お問い合わせフォーム( MWWPFORM)
意識した点・こだわった点
・ TOPページの成功事例一式と、料金ページの料金表の中の金額箇所はクライアント様で内容を差し替える事ができるように固定ページにカスタムフィールドを設けて実装。 ・投稿詳細ページのアイキャッチ画像がない場合は見辛くなるため、アイキャッチ画像が出ないように実装 ・電話番号欄をPCでクリックしても、電話がかからないように実装 ・ハンバーガーメニュー内でも資料請求・お問い合わせボタンを強調 ・公式テーマユニットテストデータを用いて、投稿ページのの表示崩れがないかを確認。

ポートフォリオサイト

ポートフォリオサイト
URL
https://naho-portfolio.site/
制作期間
3週間
担当
デザイン・コーディング
実装内容
【JS】ハンバーガーメニュー・Swiper・パララックス・スクロールした際のページネーション。 【WordPress】・カスタム投稿・カスタムフィールド・コンタクトフォーム
意識した点・こだわった点
・ホームページの目的とテーマを、デザインにできるだけ落とし込めるよう意識。 ・人が歩く動きをGifで再現。 ・実装してみたかった動き(TOPページのパズルのパララックス、セクション毎に動くページネーション)を追加 ・Swiperは文字数が変化しても同じ高さになるように実装

デザインカンプからのコーディング

デザインカンプからのコーディング
URL
https://naho-web.conohawing.com/ishii-kadan/top.html
制作期間
1週間
担当
コーディング
実装内容
・ハンバーガーメニュー ・ファーストビューアニメーション(Swiperで実装:ゆっくりとした雰囲気を出すため、ズーム機能追加) ・スムーススクロール ・宿泊予約を押したらモーダル出現。 ・お知らせ部分のタブ ・スクロールしたらheader化 ・下層ページのパンくずナビ
意識した点・こだわった点
・headerの宿泊予約ボタンはどの画面サイズでも出るように・ゆったりとした場所のHPのため、アニメーションの速度をゆっくりめに

デザインカンプからのコーディング

デザインカンプからのコーディング
URL
https://naho-web.conohawing.com/your-coding/
制作期間
1.5週間
担当
コーディング
実装内容
・ヘッダーナビのハンバーガーメニュー ・スムーススクロール ・よくある質問のアコーディオン ・Swiper (カルーセルパネル) ・AOS.jsでアニメーション ・プライバシーポリシー同意ボタンチェック無し時のお問い合わせフォーム送信無効化
意識した点・こだわった点
・どの画面幅でも崩れないようにコーディング ・CSS設計を意識(まだまだブラッシュアップ必要) ・ Scssを使用して効率化・ファイル分割適用

ヨガ教室テンプレートHP

ヨガ教室テンプレートHP
URL
https://tmp-yoga2.wearecreators0107.com/
制作期間
2週間(実質1週間)
担当
コーディング
実装内容
・ハンバーガーメニュー
意識した点・こだわった点
• 画像が多いため、svgやjpg利用箇所の選定 • どの画面幅でも後ろのdotの背景の位置が崩れないようにコーディング • 共有物ということもあり、GitHubとGitにてバージョン管理

タイトルが入ります

タイトルが入ります
URL
urlが入ります
制作期間
テキストが入ります
担当
テキストが入ります
実装内容
テキストが入ります
意識した点・こだわった点
テキストが入ります

CONTACT

ご相談・料金のことなど、些細なことでも、お気軽にご連絡ください。

お名前必須
メールアドレス必須
お問い合わせ内容必須