Webデザイナーを目指して就職活動していたサカナです。
就職前に作ったポートフォリオをほぼそのままの形で公開しています。
ですのでコードの汚さだったり、サイトの重さだったりも当時のままです。そういう部分はあまり参考にしないでください。
その頃からちゃんと考えて作れよって話ですが…。まだまだ見た目を作るので精いっぱいでしたorz
制作物もすべて見れます。是非リンクから飛んで見てみてください。
制作物に関しても当時のままなので、コードの汚さだったr（以下同文）。
サイト内の動きに関しても、jQueryを少し使っているくらいです。
あとほとんど「Animate.css」と「WOW.js」というツールを使用して動きをつけています。
「コピーandペースト」が出来る方でしたら誰でも簡単にサイト内で動きを付けれるので参考にしてみてください。
（※参考リンク：コリスさんの記事）
しかし実務で動きをつけるときはCSSやJavaScript（jQuery）の知識がマストです。
なんだか説明してたらこのポートフォリオ大丈夫かなという気がしてきましたが、なんか参考になれ／(^o^)＼（投げやり）
ヘアサロンサイト
企画/デザイン/コーディング/写真
７人日（＋修正３人日）
メインターゲットは美容室が苦手な20〜50代の女性としています。
美容室の「オシャレ」のイメージとは違い「明るく、可愛げ」のある感じを取り入れることによって、webサイトを見た人が気軽に行けそうな雰囲気にしています。
個人経営されている美容室のwebサイトを制作させて頂きました。
また、所々にイラストのアニメーションを挿入し、サイトに動きを取り入れました。
打ち合わせは計3回ほど行い、写真は実際にお店で撮らせて頂きました。
※このポートフォリオでは文章・一部リンクがダミーになっています
ヘアサロンサイト
鎌倉寺社巡り.com
（架空のサイト）
企画/デザイン/コーディング/写真
４人日
鎌倉の寺社巡りを案内するwebサイト です。
「和」を意識して、サイト全体を縦書き文章にしています。メインカラーは新緑や竹、お茶をイメージし、グリーン系にしました。
2020年の東京オリンピックを機に、東京や近郊エリアの観光需要が高まることに加え、近年の御朱印集めブームにより、寺社を訪れる人をターゲットとしています。
TOPページのみの制作となります。
「和」の落ち着いた雰囲気にするため、余白、字間にややゆとりをもたせています。
多言語化を意識して、TOPページに言語切り替えのボタンを設けました。（実際には切り替わりません）。
Webサイト内の写真はすべて実際に鎌倉で撮影したものを使用しています。
鎌倉寺社巡り.com
（架空のサイト）
ポートフォリオサイト
（このサイト）
企画/デザイン/コーディング/写真
５人日
北海道在住のため、ヘッダー画像は札幌大通公園のテレビ塔、フッター画像は広大な大地を連想させる風車を使用しシンプルの中にも北海道を表現してみました。
極力ページ移動をなくし、１ページですべての情報が得られるようにしています。
転職活動のため、私の簡単なプロフィール、実績、スキルを掲載しています。
私自身のポートフォリオwebサイトです。
シネマグラフGIFを撮影・制作し、ヘッダー、フッター部分の背景としています。また、GIFのループ部分が見えなくならないよう、レスポンシブ時に画像比率が変化しないようにしました。
ヘッダーのメニューのhover時、CONTACTのメールアイコンのhover時は、それぞれシネマグラフGIFとリンクするような動きを表現しています。
WORKSエリアの一覧は、ポップアップ表示にすることによりページ移動の手間を減らしました。
CONTACTページはBootstrapを使用し、PHPにてフォームを作成しました。私のメールアドレスに送信されるようになっています。(※現在は送信されません)
ポートフォリオサイト
（このサイト）
鮪総合病院
（架空のサイト）
企画/デザイン/コーディング
３人日
一般的な病院のWebサイトを模擬して制作いたしました。トップページのみの制作となります。
コンセプトは誠実と安心感を与える病院のWebサイトです。ネイビー系のカラー、TOP画像のグラデーションや文字の柔らかさで主にそれを表現しています。
病院は男女問わず幅広い年齢層の方がターゲットとなるため、老若男女誰でもわかりやすく見やすいということを第一に考え制作しました。
情報として最も重要な要素である「診療案内」は一番わかりやすい場所に配置し、ヘッダー部分には病院の概要項目、TOP画像の下には見る人の目的別にサイトを誘導するボタンを設けています。
制作するにあたり、さまざまな病院のWebサイトを拝見させていただき、自分なりにわかりやすい配置を考えました。
鮪総合病院
（架空のサイト）
コーポレートサイト
（架空のサイト）
コーディング/WordPress
５人日
スマホアプリ開発・Webソリューションの開発サービスを行う架空会社のwebサイトです。
取引先として検討中、就職活動で会社の情報を得たい方をターゲットに制作しています。
必要な情報である、住所・連絡先・概要・事業内容・ニュースリリースを３ページにまとめました。
会社のイメージカラーとして、青を基調とし、グリーン系の青、濃い青、グレートーンの青でサイト全体をまとめています。
プログラミングスクールを受講していた際の課題として制作致しました。
webサイトのデザインは決まっており、それに沿ってワイヤーフレーム・デザインカンプ制作、コーディングを行っています。
より実用に近いサイトを制作したかったため、受講後にWordPressを組み込み、主にニュースリリース部分を投稿しやすくしました。
コーポレートサイト
（架空のサイト）
ショッピングサイト
（架空のサイト）
コーディング
６人日
コンセプトは「女性、男性ともに使ってもらえるようなシンプルなデザインの雑貨屋さん」です。
ターゲットユーザーの年代は20〜30代、スマートフォン利用が主。雑貨好きの女性向けだが、男性も問題なく利用できる。という設定にしています。
ネットショップなので、商売の機会を逃さぬようターゲットユーザーを決め込みすぎず、どんな人にもでもすぐわかるデザイン情報を念頭に制作しました。
プログラミングスクールを受講していた際の課題として制作致しました。
webサイトのデザインは決まっており、デザインカンプより得た情報を元に、TOPページ・下層ページ２つのコーディングを行っています。
ショッピングサイト
（架空のサイト）
模写による制作物
レスポンシブデザイン、Sassの記述が可能です。エディタは現在Dream weaver、スクールではcloud9を使用してました。
jQueryなど、部分的に動かすような基本的なコードは書くことができます。
静的webサイトにWordPressを組み込みました。ブログ運用もWordPressにて行っております。
趣味で写真加工や動画編集をしていたため、使い慣れているソフトです。webデザイナーの勉強をする上で、 デザイン制作に関わる機能を新たに学びました。
基本的な機能は問題なく使用できます。現在一番勉強中のソフトです。
趣味で写真撮影、動画撮影をしています。撮影に加え、編集や加工に関しては得意分野です。制作したWebサイトは、ほぼ自分で撮った写真を使用しております。