works

Reed Design Studio — ポートフォリオサイト

Reed Design Studioのサイト画像
使用ソフト:Adobe Photoshop,Dreamweaver

introduction

当サイトです。自分のプロフィールサイトはデジタルハリウッドSTUDIO by LIGの課題で制作していましたが、フリーランスとして活動するにあたって、屋号のサイトが欲しいと思い制作しました。また、デジタルハリウッドSTUDIO by LIGの卒業制作とも兼ねて制作しています。

design concept

サイト制作の目的は、1番はまず「Reed Design Studio、私を知ってもらう」ということでした。なので、屋号の葦(reed)からデザインイメージを考え、葦の画像を各ページに配置しました。葦がメインイメージです。

デザイン自体はロゴからイメージを膨らませて、シンプルで洗練されたオシャレ感を目指しました。フォントもゴシック体よりは明朝体・セリフ体にして、大人の女性が静かに語りかけてくるようなイメージで選びました。シンプルオシャレは私の好きなデザインの1つです。

そして、サイト訪問者がすぐに目的のものを見つけられるよう、スクロール回数が少なくなるよう、TOPページはscrollfy.jsというライブラリを使用し、1ページごと画面が移動するようにしました。
TOPページはそれぞれのコンテンツを最低限に記載し、詳細が気になったらそれぞれの下層ページへアクセスいただく、という導線を考えてのことです。

下層ページは、ただテキストや画像を羅列しても飽きると思ったので、JavaScriptでスクロールしたらテキストがふわっと現れるようにして、次はどんな文章が書かれているんだろう、というわくわく感を感じていた抱けるようにしました。
とはいえ、内容が多いサイトですので、ハンバーガーメニューやサイトマップで目的のものにすぐ飛べるようにもしています。

せっかくの卒業制作なので、学びの集大成となるよう苦手なJavaScriptやjQueryも色々使って動きのあるサイトを目指しました。

改善の余地はまだまだあるので日々日々更新していこうと思っています。

production time

・約1ヶ月

site URL

https://reed-design-studio.com

proposal

企画書PDF(約1.9MB)