ZEAL株式会社様

URL:https://zeal-transport.com/

カテゴリー： コーディング

実装スキル： HTML /CSS jQuery レスポンシブ FLOCSS Figma

実装部分:TOPページ＋下層ページ7ページ

実装期間:2週間

【感想】

運送会社様のHPをコーディングいたしました。
デザインに添えるよう、デザイナーの方と連絡を取りながら作成いたしました。

株式会社ケイアール様

URL:https://kei-r.net/item1/

カテゴリー： コーディング

実装スキル： HTML /CSS jQuery レスポンシブ FLOCSS Figma gulp

実装部分:TOPページ

実装期間:５日間

【感想】

化粧品のLPをコーディングいたしました。
スマホ特化型で、PCでは背景固定で作成しております。
FLOCSSにて作成。
ボタン追従部分はブレイクポイントを２つ設けて、どの画面幅でも綺麗に見えるよう配置いたしました。

架空建設会社様

URL:https://liebefactory.com/works/cocomate03/

カテゴリー： コーディング

実装スキル： HTML /CSS jQuery レスポンシブ FLOCSS Figma gulp

実装部分:TOPページ＋下層ページ1ページ

実装期間:3日間

【感想】

実装はTOPページと事業内容ページ。
デスクトップのカンプのみで、SPはよしなに作成いたしました。
FLOCSSを採用し、ヘッダーはメインビュー過ぎたら色が変化するように実装いたしました。
できるだけ共通パーツを作成して組んでいきました。

We are creators様

URL:https://wearecreators0107.com/

カテゴリー： コーディング

実装スキル： HTML /CSS jQuery レスポンシブ FLOCSS Photoshop gulp GitHub

実装部分:TOPページ＋下層ページ1ページ

実装期間:2週間

【感想】

アニメーションがたくさん使われているサイトとなります。
FLOCSSを採用し、GitHubでお客様とやり取りを行いました。
パーツの詰まったサイトのため、ブレイクポイントは２つ設定しております。

架空英会話会社様

URL:https://liebefactory.com/works/cocomate01/

カテゴリー： コーディング

実装スキル： HTML /CSS jQuery レスポンシブ FLOCSS Figma gulp

実装部分:TOPページ＋下層ページ1ページ

実装期間:5日間

【感想】

こちらはデスクトップのカンプのみで、SPはよしなに作成いたしました。
FLOCSSを採用し、リキッドレイアウトで作成し、画像の差し替えや文字数変化にも対応できるよう、保守性の考えてコーディングいたしました。

Liebe制作所 HP

URL:https://liebefactory.com/

カテゴリー： WordPress

カテゴリー： コーディング

実装スキル： HTML /CSS WordPress jQuery レスポンシブ FLOCSS Photoshop gulp

実装部分:TOPページ＋下層ページ1ページ

実装期間:5日

【感想】

自身のポートフォリオ。
HTML/CSS/jQueryで作成していたものをのちにWordPress化いたしました。
デザインに忠実になるように制作し、FLOCSS設計を採用して保守性を高めました。
カスタムフィールドで投稿を統一、カテゴリー・タグを設置することで簡単に投稿できるよう作成しています。

オリジナルハンドメイドブログ

URL:https://liebefactory.com/handmade/

カテゴリー： WordPress

実装スキル： WordPress レスポンシブ XD cacoo

実装部分:TOPページ＋下層ページ1ページ

実装期間:1ヶ月

【感想】

ワイヤーフレームを作成して、コーディングいたしました。
将来ハンドメイドを売りたいなという願いがあり、そのときに使うことを想定して制作しました。
WordPressで制作し、カスタム投稿など使って実装しました。