HY WEB CREATION

Contents

Works

制作物をご紹介します!

HY WEB CREATIONはデザインデータからのコーディングをメイン事業としてます。お客様が安心してコーディングをおまかせいただけるよう、納品時には以下の内部チェックを実施しております。

  • デザインとのズレがないこと(ピクセルパーフェクトを狙う)
  • スマホから大画面PCまでの多様なレスポンシブ幅で崩れがないこと
  • コードをシンプルに保つこと(インデントは適切か、不要なコードが残ってないか)

01.ポートフォリオサイト
制作期間:12日

担当:デザインからコーディングまで
使用ツール:Figma/VScode/Zeplin
ワイヤーフレームにはじまり、デザイン、コーディングまで全てを自分で1から作りましたので、特別に感慨深い作品となりました。コーディング中、何度もデザイン段階からのやり直しを繰り返してしまったので、本制作により、デザインを極限まで練り上げてからコーディングへ進める事の重要性を再認識いたしました。また、グリッドやリキッドなどのモダンCSSも多数採り入れることで、新技術の実践の場としました。

こだわりポイント

グリッドのメリットを生かし、制作物の配置が単調にならないよう工夫しました!

02.コーポレートサイト(WPテーマ構築)
制作期間:14日

担当:コーディングとWordPressテーマ化実装
使用ツール:XD/VScode/Zeplin
クライアント様で更新しやすくするため、カスタムフィールド(ACF)、カスタム投稿タイプを用いた実装をさせていただきました。
公式テーマユニットテストデータで表示崩れがないことを確認しました。
表示を確認する
User: MintSalad PW: Green384@

こだわりポイント

レスポンシブ(スマホ画面)時のドロワーメニュー画面は、当方にて構成しています。色使いなど、トンマナに配慮いたしました!

03.温泉旅館サイト
制作期間:10日

担当:コーディング
使用ツール:XD/VScode/Zeplin
温泉旅館らしく、ゆったりしたイメージとなるように、アニメーションを調整させていただきました。
モーダルウィンドウ・ドロワーメニューでjQueryを使用しています。
表示を確認する
User: MintSalad PW: Green384@

こだわりポイント

ファーストビューは画面いっぱいにスライドショーが流れますが、適切な画像サイズ&圧縮をかけ、動作が重くならないように調整いたしました!

04.KIRIHARE株式会社
ランディングページ

担当:コーディング
使用ツール:XD/VScode/Zeplin
長さ約15,000pxのページでしたが、共通パーツは適切にコンポーネント化することにより、シンプルなコードで実装させていただきました。また、レスポンシブ対応は当方におまかせいただきました。

こだわりポイント

画面幅によりファーストビューの文字と写真が干渉する箇所がありましたが、写真の色調をCSSで調整し、文字を際立たせることでご満足頂きました!

05.コーポレートサイト
制作期間:5日

担当:コーディング(Topのみ)
使用ツール:PhotoShop/VScode/Zeplin
サイト読み込み時のローディング、ファーストビュー、スムーズスクロール、ドロワーメニューにアニメーションを使用しております。
表示を確認する
User: MintSalad PW: Green384@

こだわりポイント

斜線をとり入れた図形部分は、画像を使わずCSSのみで実装することで、表示の滑らかさと表示速度を両立させました!

06.順次更新していきます。

Thanks

About Me

堀江 裕介

堀江 裕介

フリーランスのWebコーダー。兵庫県在住。コーディングと音楽が好き。

【経歴】
大手メーカーにてエンジニア(16年)の傍らWeb学習、制作案件を手掛け、2021年に独立。

【スキル】
HTML / CSS / JavaScript(jQuery) /
WordPress / Git / Pug / Sass / Gulp

【仕事への想い】
Webサイトを人に例えると、デザインはBody、コードはSoulだと(勝手に)思っています。コードで命を吹き込まれたサイトが人の心を動かし、未来への起点となればいいなと思います。

Contact

仕事のご依頼やご質問等は以下のフォームで送信ください。
3営業日以内にご返事いたします。

会社名
お名前
メールアドレス
お問い合わせの内容

お問い合わせありがとうございました。

© 2021 HY WEB CREATION

We’ll make your code soulful.