Rotate your phone

lilyhana.web 猫の写真

私が最初に制作したサイトになります。トップページの画像はPhotoshopにて作成、フルスクリーン表示になっていて、PCでは横長、モバイル端末では縦長の画像になっています。右側の猫のプロフィールの部分は、PC表示では横幅を生かしてグリッドレイアウト、モバイル端末では縦長の1列のレイアウトにしました。非常に小規模なサイトですが、訪問者様が迷わないように簡単なパンくずリストを設置しています。デザイン性はあまり重視しておらず、プラグインを使用してのページネーション、アクセスカウンター、各種ゲーム、MYSQLを使用したアンケート機能、ログイン認証機能など自由に色々な機能を詰め込んだ実験的なサイトになります。

SCROLL

lilyhana.webの画像

Makoto Jinno Official Site

絵の紹介、宣伝等を目的とした静的な個人サイトのリニューアルのお手伝いをさせていただきました。画像データなどは用意していただき、主にコーディングを担当させていただきました。元々のサイトのデザインのベースは崩さずに、レスポンシブデザインを実装し、サイトの雰囲気を損なわないように、アニメーションはなるべく使わず、特に余白の取り方に注意して制作しました。制作前の打ち合わせ、データのやり取り等、実践的な経験をさせていただきました。「 リニューアル前のサイトとの比較図」

SCROLL

lilyhana.webの画像

YOSHISUGA My Portfolio

私、個人のポートフォリオサイトになります。 お問い合わせフォームにreCAPTCHAを導入し、フロントで認証後に送信ボタンのロックを解除、さらにサーバー側でチェック後、認証が成功すればフォームで入力されたデータを受信、リザルト画面で表示する仕組みになっています。また、LINEアプリを使用して気軽にお問い合わせできるように、私のアカウントへの友達登録ボタン、QRコードを埋め込みました。一部のテキストにベクター画像を使用した筆記体のハンドライティング風アニメーションを実装しました。instagram graph APIを使用してサイト内にinstagramを埋め込み、各データを取得して表示しています。

SCROLL

yoshisuga-clinic.spaceの画像

よしすがクリニック

架空の医療系サイト「よしすがクリニック」を制作しました。医療系サイトでよく使われている白、緑をベースカラーにし、クライアント様がブラウザ上から簡単にホームページの一部のコンテンツを更新できるように、WordPressを使用してお知らせ欄のみにCMSを導入しました。WordPressのページでは、元々あったテンプレートを静的なページのデザインに合わせてカスタマイズし、表示させています。HTMLファイルを触らずに、お知らせ欄の記事作成、画像添付、など本格的なブログを簡単に投稿できるようになっています。主要ブラウザ各種を使用してクロスブラウザテストを行ないました。IE11,MicroSoftEdgeはVirtualBoxを使用してテストしています。「クロスブラウザテストの画像」

SCROLL

yoshisuga-clinic.spaceの画像

YOSHISUGA-STORY

架空のゲーム「YOSHISUGA-STORY」を紹介するサイトを制作しました。プラグインを用いてパララックス効果を使用したサイトになっています。お知らせ欄にCMSを導入し、TWITTERも埋め込んで簡単に更新できるようになっています。PHOTOSHOPを用いてゲーム用のバナーを複数枚製作後、バナースライダーとしてページ内に配置しています。テーマソング、各キャラクターのボイスを再生できるようになっていて、デザインが限定されてしまうためAUDIOタグは使わずに、クリックイベントで各ボタンに対応したデータが再生される仕組みになっています。

SCROLL

yoshisuga-clinic.spaceの画像

Corp-Style

コーポレートサイト向けのwordpressのオリジナルテーマを製作しました。プラグインは使わずに、ページネーション、パンくずリスト、スライダーをデフォルトで搭載しています。トップページのスライダー画像はカスタムヘッダーを利用しているので管理画面から画像を入れ替え可能で、デフォルトでは三枚の画像が表示されます。カスタム投稿を使用して社員紹介ページ、社員ブログを運用できるようになっており、紹介投稿では、専用のカスタムフィールド 、管理画面で入力していただいた各ユーザーのプロフィールのデータを使用してアーカイブ、個別ページに反映されるようになっていて、ブログ投稿の個別ページでは記事を書いた人として執筆者のプロフィール、アバター、執筆者の紹介個別ページへのリンク、author.phpへのリンクが表示されるようになっています。また、カスタムタクソノミーのアーカイブも作成しています。

SCROLL

yoshisuga-clinic.spaceの画像