Yamashita
Portfolio Site

参考サイトの内容をベースに、デザイン～WordPress化までお任せいただきました。
LPのため余計なリンクは実装せずに、ヘッダーナビ固定で同LP内にジャンプできる仕様です。

既存WordPressサイトへの実装と、同バナー制作も対応させていただきました。

介護施設の既存サイトが古くなったため、リニューアルのご依頼でした。
一時保留になっていたためお時間を頂戴しましたが、デザインは既存関連サイトを流用してコンテンツ部分のみ作成、同ブログも統合しています。

料金計算やカレンダー並列表示などを実装させていただきました。

参考サイトの内容をベースに、デザイン～WordPress化までお任せいただきました。
他ページへの無駄なリンクを省き、レスポンシブで上スクロール時のみ下部メニューを表示させています。

既存WordPressサイトへの実装と、同バナー制作も対応させていただきました。

20～40代の顧客を対象にした、海辺のカフェの仮想案件（デザインカンプ）です。

店名ロゴや地名、文言の指定などがある設定で、詳細はFigmaページに記載しています。

ブルーを基調とした爽やかなイメージで仕上げました。

子供向け英語塾の仮想案件を、トップページをメインにゼロから制作したデザインカンプです。

ペルソナやターゲットを自ら設定しました。外国人講師がメインの少し高級路線の英語塾です。

親子で楽しめるデザインながら安っぽくならないよう意識しました。

当サイト（My Portfolio）のワークフレームとデザインカンプです。

ワイヤーフレームはPCのみで大枠を作成し、デザインカンプはコーディングの際の基準となりました。（緑色の文字は後の制作用メモ書きです。）

初のワイヤーフレーム＆デザインカンプ作成、HTMLで記述の後WordPress化した当サイトです。
トップページのメイン画像周辺、実績詳細のスライドは特に苦労しました。

実績一覧は新着順に反映、実績詳細では一元管理などイメージに近い作品に仕上がりました。

架空のスニーカー紹介サイトです。

まず3Dの動画が目を引き、その下にスニーカー画像を自動でループ（周回）させています。

さらに下方には画像がふわっと浮き上がる（フェードイン）で動きを出しています。

架空のコーヒー専門店です。

・画面スクロールで画像の視差効果（パララックス）
・メニュークリックでゆっくり目的地へ（スムーススクロール）
・「」ボタンにマウスを置くとアニメーション
...など動きを取り入れています。

架空の家具ECサイトです。

一覧下『View More』では一覧ページが開きます。

右上のハンバーガーメニュー（PRODUCTS、ABOUT、COMPANY、CONTACT）内の各ページも実装しています。

個人ブログはWordPressが多いですが、当ページのようにHTML・CSSによる2カラム（左右2分割のレイアウト）も可能です。

ただ更新型サイトの場合はHTML・CSS実装よりも、自動で最新情報の反映ができるWordPressによる作成をおすすめします。

架空の日本料理店サイトです。
このサイトのように文字を縦書きに配置して、和風の雰囲気演出も可能です。

画像の上に薄い色やテキストをずらして載せる配置など、画面幅可変時にレイアウトが崩れやすく対策に苦労しました。

架空の会社案内サイトです。画像とテキストの配置をあえてずらす事で、画面の中に動きが出ます。
画面幅によりお問い合わせボタンが非表示になります。

また、最大幅を設定しながらあえてはみ出させて、視線の動きが単調にならないような導線になっています。

架空のブランドアパレルサイトの紹介・販売ページです。

ターゲットが女性ということで、全体的に余白を持たせたゆったりとしたレイアウトになっています。

数量の変更（サイト中の設定は1～3）にも対応しています。

アンティークな雰囲気を残す架空の書店紹介（1ページのみ）です。

画像の上に色と文字を載せていますが、画面幅によってレイアウトが崩れやすいので制作の際は苦戦しました。

建築系デザイン事務所（近代建築）HPの仮想案件です。

1ページのみの作成ですが、PCとスマホでメイン画像が切り替わります。

News記事を新着順に反映する際は、CMS機能（WordPress化）が必要です。

架空の手作りアクセサリー専門サイトです。

メインの1ページのみですが、バランスをくずさず画面幅の可変対応に苦労しました。

下部は左右を反転させたレイアウトで、フォントも変更することにより雰囲気が変わります。

前作『Recipe Diary』の詳細ページの一例です。

料理の特徴がわかりやすように、大胆に画面の横幅左半分を使用しています（PC画面時）。

料理系サイトは料理画像の色味やテカりなど、より美味しそうに見せる画像の工夫も重要です。

料理系まとめサイトのサンプルページです。

サイトはシンプルな1ページですが、派生させて複数料理ページの掲載も可能です。

一番最初に画面を開いたときに表示される画像で、訪問者さんの注意を引けるかがポイントです。

前作『PHOTO BOOK』に続き新たなページを受注、作成した ... という設定の課題です。

一番上のメイン画像下（INDEXから下）のコンテンツ幅の幅を統一しています。
また、下部にある4枚の大きさの異なる画像をそろえました。