診断コンテンツの作成

診断コンテンツをReact,TypeScriptを使用し作成しました。

adobe XDでデザインカンプを受け取り、Viteで開発環境を構築しました。React,TypeScriptを使用し、cssのライブラリはEmotionで作成しました。ロジックはそれぞれの質問に対して分岐フローを作成し、3つの質問に対してそれぞれ3問の問いがあり、最終的に診断結果は27通りになるようにしました。診断結果や質問内容等、修正やレイアウトの変更があった際も、柔軟に対応できるようコンポーネント分割を工夫しました。

メディアサイト制作

アウトドアメディアサイトのコーディング、サーバーアップロードまで担当しました。

adobe XDでデザインカンプを受け取り、HTML,CSS（SASS）,JavaScriptで作成し、ワードプレスのオリジナルテーマで構築しました。基本的にJavaScriptのライブラリは使用せず、スマホ時の記事一覧カテゴリーのアニメーション部分のみGSAPを使用しています。最新情報は通常の投稿画面から投稿し、アウトドア情報、商品詳細はカスタム投稿で投稿できるように作成しました。

ホームページ制作

自身の会社のホームページを素材集めからデザイン、コーディング、サーバーアップロードまで担当しました。

adobe XDでデザインを作成し、ワードプレスのオリジナルテーマで構築しました。地域柄お年寄りや観光客が多いので、なるべく見やすくシンプルな作りになっています。会社の方からお問い合わせページはなしと言われたので、スマートフォン画面では電話番号を常に表示し、電話を掛けやすいように設定しました。

LP制作（コーディングのみ）

ライティングスクールのLP制作をコーディングからサーバーアップロードまで担当しました。

adobe XDでデザインカンプを受け取り、html.css(sass),jQueryで作成しています。CTAボタンに常に動きをつけることで、ユーザーがアクションしやすいよう、提案し作成しました。

スマホ用LP制作（コーディングのみ）

ライティングスクールのLP制作をコーディングからサーバーアップロードまで担当しました。

adobe XDでデザインカンプを受け取り、html.css(sass),JavaScript,PHPで作成しています。「スマホ用のみ作成してほしい」という要望だったため、パソコン表示の際はスマホの幅と同じように表示されるよう調整しました。PHPを使用してお問い合わせフォームにメールアドレスを入力すると、そのメールアドレス宛に資料（PDF）が送られるよう設定しています。

架空サイト制作（コーディングのみ）

ワードプレスを用いた企業サイトの構築例として、adobe XDのデザインカンプよりコーディングを行っております。

架空サイトなので、Basic認証をかけています。お手数ですが、ユーザー名、パスワードの入力をお願いします。
ユーザー名:johnmassy
パスワード:massymassy
Topの事例部分と料金部分はカスタムフィールドでクライアント様からも変更しやすくしており、お知らせ部分はカスタム投稿で対応しました。また、記事ページでは関連記事やおすすめ記事を実装しており、記事をSNSでも共有できるようにしております。お問合せフォームでは自動返信メールの設定なども行っており、最後に公式テーマユニットテストデーターを用いて動的処理による表示崩れがないか確認しております。

架空サイト制作（コーディングのみ）

html,css(scss),jQueryを用いたホームページの作成例として、adobe XDのデザインカンプよりコーディングを行っております。

架空サイトなので、Basic認証をかけています。お手数ですが、ユーザー名、パスワードの入力をお願いします。
ユーザー名:johnmassy
パスワード:massymassy