Yazaki Website

Portfolio ポートフォリオ

ID：demo

PASS：demo-01

ID：demo

PASS：demo-02

HTML / CSS / JavaScript (jQuery) / WordPress
制作時間：約120時間
ページ数：全10ページ
Figmaデザインカンプを基にコーディングしています。
トップページのファーストビューは、CSSの@keyframesを用いて、画像が時間経過で入れ替わるアニメーション仕様となっています。
ブログ記事は、クライアント様ご自身で入稿できる仕様です。また、ブログ記事一覧ページには、WordPressプラグイン機能を用いてページネーションを実装しています。
スタッフ紹介ページも、カスタム投稿機能を用いて、クライアント様ご自身で入稿できる仕様となっています。
エントリーフォームは、jQueryでバリデーションを実装しています。また、ContactForm7を使用しているので、ユーザーへの自動返信、およびサイト管理者への通知に対応します。

ID：demo

PASS：demo-03

HTML / CSS / JavaScript (jQuery)
制作時間：約40時間（半オリジナル化含む）
ページ数：全1ページ
Photoshopデザインカンプのコーディング課題を基に、ロゴや配色、題材、画像、テキストを変え、半オリジナル化をした作品になります。
架空の化粧品会社のコーポレートサイトです。紫やピンクを基調とした女性らしい配色と、ボタンや背景に取り入れたグラデーションにより、「華麗で上品な美しさ」をイメージしました。また、ユーザーに信頼感を届けられるような画像選定と、誠意が伝わるような文章表現にもこだわっています。
JavaScriptを用いたヘッダーメニューの追従や、CSSの@keyframesを用いたファーストビューの切り替わりなど、動きのあるサイトに仕上げています。

HTML

ご用意いただいたデザインに忠実なコーディングを行います。セマンティックかつ保守性に配慮して記述いたします。デザインデータはFigma/XD/PSD等にて承ります。

CSS / Sass

BEMなどのCSS設計手法を用いて、保守性や可読性に配慮したコーディングを行います。Sassを使用して、一貫性と再利用性の高いコードスタイリングをいたします。レスポンシブデザインにも対応し、様々なデバイスで最適な表示を実現します。

Java Script / jQuery

JavaScriptやjQueryライブラリ等を用いて、サイトに動的要素を追加します。スライドアニメーションや、ナビゲションメニューの開閉など、ユーザー体験を向上させる機能を実装します。

WordPress

静的HTMLサイトのWordPress化（オリジナルテーマ）を行います。管理画面からの柔軟なコンテンツ更新や、将来の拡張性を考慮したカスタム機能の実装など、クライアント様のニーズに合わせたWordPress環境を構築いたします。

Yazaki

大学卒業後、市役所に９年間勤務し、窓口業務や総務などに従事。

育児を機に退職。現在はwebコーダーとして活動中。

前職では市民一人ひとりにしっかりと向き合い、責任を持って業務に当たってきました。

その心構えを忘れずに、クライアント様の意図を汲み取り、迅速で正確なコーディングと、デザインの忠実な再現を行います。また、Web制作を通じて、クライアント様の想いをユーザー様に届け、人と人とのつながりを作る一助になりたいと考えています。