このポートフォリオサイトでは、学生時代の作品を公開しています。それ以外の作成したものについてはお問い合わせ頂けましたらご提示させていただきます。今後リニューアル予定です。
株式会社ウエディングパークにてデザイナーとして働いています。
取得資格
基本情報技術者試験、ITパスポート、Webリテラシー検定、J検 情報活用試験1級、J検 システムエンジニア認定、Webデザイナー検定 エキスパート(CG-ARTS)、カラーコーディネーター検定 3級、ビジネス能力検定 2級
扱えるツール
Photoshop、Illustrator、Atom
扱えるプログラミング言語
PHP、Java
職歴
学生時代には大阪第一ホテルにてレストランホールと宴会場にて準社員として勤務、その後新卒で株式会社ベーシックにてデザイナーとして勤務し、2017年より株式会社ウエディングパークにてデザイナーとして勤務
画像をクリックしていただくと詳細をご覧いただけます。
*ターゲット
20,30代のワインに興味がある、もしくはワインが好きな男女をターゲットとしています。
*ターゲット外
ソムリエのように高い知識を有する方はターゲット外としています。
*背景
作成にあたった背景は国内におけるワイン需要の拡大(メルシャン株式会社 様の資料より)と消費税増税がございます。
*目的
作成の目的は背景にもありますようにビールとは相反し、ワインの需要は拡大しています。 もちろん、若者にもその傾向が顕著に表れており、ワイン好きの若者は少なくありません。 ワインは数えきれないほどあるものをラベルや産地から選び購入する必要がありますが、失敗することも多々あります。 消費税の増税があり、ワインのような贅沢品にはお金が出せないと買い控える若者は増えると私は考えました。 では、その失敗さえ減らすことが出来れば、買い控えるということは得るのではないか、と考え作成したのがこのWEBサイトです。 自分自身はワイン日記として活用し、他のユーザーはその情報を参考に店にあるワインの味を想像します。 自分と味覚が合う人が見つかれば、その人をフォローし、さらに有益な情報をいただけるでしょう。
*使用技術
HTML5、CSS3、JavaScript、jQuery、PHP、MySQL
*想定する行動パターン
【行動パターン1】
お店でワイン選びに悩んだ人がサイトを訪れます。(トップページへアクセス)
↓
「ワインを検索する」よりワインを検索します。(ブラウザでは技術的に現在は不可能なので、仮のデータを表示します。)
↓
ワインの情報を詳細ページで確認します。
↓
そのワインを楽天市場ですぐに購入することも可能です。(これによるアフィリエイト収入も運営資金の一部としています。)
【行動パターン2】
ワイン日記の代わりとして利用しているAさんがサイトを訪れます。(トップページへアクセス)
↓
「ワインを評価する」よりワインを評価します。
↓
評価した情報は「グローバルワインセラー」のページに最新情報として表示されます。
※ただし、公開設定を公開にしている場合に限ります。
【行動パターン3】
いつもご利用いただいているBさんがサイトを訪れます。(トップページへアクセス)
↓
上から下まで全てをチェック
↓
「ワインの情報コーナー」はイメージとしては価格.comさんなどでもよくある「PR企画」です。 利用ユーザーにとっても有益な情報であり、運営側としても依頼主から頂く料金が運営のメイン資金となるため、ビュー数を伸ばせるように魅力的なバナーにしています。
*こだわりのポイント
(1)どんなスマートフォンでも限りなく片手で操作できる形に!
iPhone6 Plus以外のiPhoneですと、画面サイズがコンパクトなので、どんなスマートフォンサイトでも比較的片手で操作できるかと思いますが、AndroidやiPhone6 Plusは画面サイズが大きいため、一般的なスマートフォンサイトは片手での操作は困難です。
「気軽に利用できる」
これを実現するには片手での操作にも配慮しなければならないと考えました。
ですので、メニューを始め、基本的に左右対象でデザインしております。
これにより、端末のサイズ関係なく、片手での操作を可能にしました。
(2)専門用語を使わない!
ワイン日記系のウェブサイト及びアプリケーションは既に存在します。しかしながら、ワイン初心者には何を言っているのかよく分からないというのも正直なところ。 そこで評価項目を減らし、さらに専門用語を使わない工夫をしました。「ワインを評価する」ページでは特に顕著に表れております。
(3)誤操作を少しでもZEROへ!
皆様もスマートフォンサイトを閲覧していて、誤操作してしまったことはありませんか?
そういった小さなことがストレスへと繋がりますよね。
そこで、ボタンサイズは出来るだけ大きく、さらに無駄なコンテンツスライダーは出来るだけ排除し、誤操作のリスクを減らしました。
*作品のURL
※スマートフォン専用サイトの為、スマートフォンでご覧ください。
*サイトの目的
ミスターコンテストの立候補と投票
*ターゲットユーザー
クライアントの大学関係者
*サイトのイメージ
青色を用いて、明るいサイトにして欲しい。クラブイベントなので、ネオンのような色を取り入れて欲しい。
*使用デバイス
スマートフォン > PC > タブレット
*制作内容
サイト全体(立候補機能、投票機能、お問い合わせ機能 含む)
*使用技術
HTML5、CSS3、JavaScript、jQuery、PHP
*納期
2日
*こだわりのポイント
(1)短納期でも目的を達成しやすく
2日という短納期ですが、引き受けたからには出来る限りは尽くします。まず、レスポンシブデザインを採用し、低価格であらゆる端末でご利用いただけるようにしました。そして、このサイトにアクセスされる方の行動パターンを考えると立候補もしくは投票が圧倒的に多いと感じましたので、トップページに誘導バナーを掲載しました。左上から見ていくとしっかりと視認できる領域ですし、カラーリングも特に目立つようにしました。これにより、訪問者がしっかりと目的を達成できるようにしています。
(2)広告配置を工夫
今回はサーバーをお持ちでないクライアント様で、予算も限られているとのことで、私のサーバー領域をお貸しいたしました。ですが、それではサーバー領域を無料でお貸しすることになりますので、広告を掲載することを条件に無料でお貸ししました。そこで、高い確率で広告をクリックしていただける方法を考えました。
今回このサイトに訪れる方は「立候補」や「投票」など絶対的な目的がありアクセスされます。ですから、道を阻むものがあろうとも必ず離脱せずご利用いただけるはずです。
結果的に、1か月ほどで10,000円ほどの広告費を稼ぐことが出来ました。
*作品URL
*サイトの目的
本園の紹介
*ターゲットユーザー
20代から30代の女性(幼稚園に通いだす子供を持った母親)
*平均使用金額
27,000円(※一般的な相場と同じ)
*サイトのイメージ
添付資料を参考にして、それを反映したものを期待しています。
*制作内容
トップページのデザイン(本園の雰囲気とイメージを伝える)
*添付資料
(1)お子様のすばらしい能力を花咲かせます。
大切なお子様お一人おひとりの個性を輝かせるよう教職員一同、一生懸命頑張っています!ぜひ、大切な幼児期の教育をハル幼稚園にお任せ下さい。
また、様々なニーズにお応えするように努めています。どろんこ遊びやお絵かきなどののびのび保育から、英語・体操・プール・音楽やパソコン・知能教育まで、3歳児から全員の方に保育料の中ですべて体験していただき、社会性を身に着け、心を育てることなどすべてにバランスの取れた教育を行います。
(2)大切な早期教育、運動と合わせて脳の発達を向上させます。
さらにご希望の方には、課外保育や特設保育といった中で、お茶・お花・剣道・鼓笛隊・ソロバン等いろいろな活動を選んでいただけます。品格ある態度の育成を目指し、自分の個性に自信を持ち、しっかりと自分の意見を持ち、思いやりの心で人に接することのできるよう指導してまいります。
昨今は運動能力の向上が脳の発達に大きな影響を与えるという研究結果が出ています。星の光幼稚園で楽しく運動遊びをしながら、脳の発達に最も大切な幼児期に、当園の知能教育を受けさせてあげてください。
誤解されがちですが、本当はお子様にとって早期教育は必要です。無意味な詰め込み教育がいけないだけなのです。
(3)知能教育など見学ご希望の方も、随時受け付け致します。
慣れるかしら、通えるかしらと、ご心配な方は、慣らしのために、見学や園庭体験にお気軽にお越しください。(行事などで閉まっているときがありますので、前日までにお電話でお申し出ください。)
子どもたちのニコニコ笑顔をみて、高度な教育内容を知っていただければ、きっと満足していただけると存じます!!
。
(4)特に、SI遊び(知能教育)の時間には絶対に叱らないという指導方法をとっています。
特に、SIあそび(知能教育)の時間には絶対叱らないという指導方法をとっています。 一人ひとりの考え方を重視し、認めて、ほめます!!もちろん、正しい答えが必要なのですが、それに導くための細かな言葉かけやヒントの出し方を常に研究して実践しています。これにより、勉強(子ども達は遊びだとしか思っていませんが)→ほめられる→勉強大好き!!の回路が生まれて、将来にわたっても勉強すること、努力することの好きな人になることができます。おうちではなかなかできない特殊な指導法ですので、ぜひ、星の光幼稚園で体験させてあげてください。
*今回、クライアント様の情報から私は以下のような点にこだわりました。
(1)1人でも多くの方に資料請求をしていただく設計を。
クライアント様としては、入園者を増やしたいと強く望まれていると思いますが、WEBサイト制作者である私が出来ることはハル幼稚園に関心を抱いていただき、園の見学や資料請求を増やすまでだと考えています。
そこで、私は一番上の目立つところに「入園をご検討の保護者様へ」というキーワードを用いて、案内ページへの誘導を考えました。
その他にもトップページに資料請求のバナーを大きく設け、最も重要な部分を見逃されることのないように致しました。
(2)文字数が多いという印象を減らす工夫→飽きさせない工夫
今回、クライアント様から掲載依頼があった文字数は非常に多く、このままでは利用ユーザーの離脱率が上がってしまうと考えました。
そこで、少しでも文字数が少なく、快適に見ることが出来るという印象を与える目的で、リズムのある配置手法を採用したり、ポップなカラーリングにこだわったバナーを数多く作成しました。
これらの工夫により、文字数が多いというイメージを減少させました。
*作品URL
→http://asamone.com/kindergarten/
※ブランディング部分に後日スライダー機能を追加予定です。
*店舗詳細情報
フランチャイズ展開しているベーカリーショップ。ショップのコンセプトを「気軽で、オシャレで、美味しいパン屋さん」とし、20代の若年層から40台主婦層を主なターゲットとして展開しています。また、定期的に様々なキャンペーン「値引き、ポイント進呈など」を実施し、「いつも何かしてくれる」というユーザーへの期待感も売りの一つとしています。
※ドトールコーヒーのパン屋さんバージョンという印象です。
*商品の価格設定
平均的な価格帯。ものにより少し高めに設定。
*出店地域
メインは繁華街。住宅地展開もあり。
*サイト形態
コーポレートサイト
*制作内容
トップページ
*使用技術
HTML5、CSS3、JavaScript、jQuery、Twitter API
*こだわりのポイント
(1)企業情報以外もしっかりと見ていただけるコーポレートサイト
コーポレートサイトですと、企業情報ばかりに目が行ってしまうものも多いです。
もちろん大切な情報でありますが、パン屋さんとして、そのパンの魅力が伝えられないWEBサイトであれば、本末転倒であると考えました。
そこで、商品情報をブランディング部分に切り替えることで、美味しそうなパンだなぁと感じていただけるように致しました。
また、同じく最もお勧めしたい情報のところにも、該当のパンの画像を用いることで、より情報を伝えやすいように工夫しております。
しかし、このままでは企業情報に目が行きません。
そこで、企業情報にはアイコンを添えることで、企業情報にもしっかりと目線を誘導するように工夫いたしました。
(2)お客様の期待を裏切らない
「いつも何かしてくれる」と思ってくださっている常連のお客様のご期待を裏切らない方法を考えました。
そこで考えたのが、画面の横幅を100%用いることでゆとりを演出し、色合いも全体的にポップに仕上げました。
第一印象が他のパン屋さんと少し違うことで、お客様に「ここは他とは違う」という印象を抱いていただき、「いつも何かしてくれる」と感じていただける狙いがございます。
(3)タブレットでも見やすいように設計
最近はスマートフォンが普及することで、タブレットの普及も少しずつ進んでいっているように思われます。 街中でも、タブレットを利用している方を少しずつ見るようになってきました。 そこで、今回Flashといったタブレットやスマートフォンで見ることが困難な技術は利用せず、全てHTML/CSS/JavaScript/jQueryで行っています。 これにより、より多くの端末でご覧いただけるようにいたしました。
*作品URL
*サイトの目的
お店の紹介
制作依頼内容
当店は高級レストランを運営しており、お昼のランチメニューから夜はディナーと各種コース料理を取り揃えております。
お客様に給仕するものとして、食材だけではなくお飲み物などにも「こだわり」を持ち、最高の時間を過ごして頂く事をお店のモットーとしております。
また、梅田という立地条件にも関わらず、店内・空間にもこだわり心身ともに特別な時間を最愛の方たちと過ごして頂きたいと思っております。
今回はWEBページを展開するにあたり、まずはサイトのイメージを掴む為、TOPページのデザイン制作をお願いいたします。
*ターゲットユーザー
30代から40代の男女
*平均使用金額
10,000円
*サイトのイメージ
高貴で洗練されたイメージ
*制作内容
TOPページのデザイン(お店の雰囲気とイメージ、また食事へのこだわりを伝える)
*こだわりのポイント
(1)高級感の演出
フォントは明朝体を使用し、カラーリングでは暖色を使用することにより、高級感の演出を試みております。
ブランディング画像内の文字が縦画技の理由ですが、これは雰囲気の良い店内の写真と美味しそうな料理の写真の上に文字を横切らせるということはお客様の空間と料理へのこだわりを考えるとするべきではないと思い、画像を分割する中央部分に文字を入れるため、縦書きに致しました。
(2)シンプルに魅力を伝える
レストランのWEBサイトでは予約の電話番号を右上に大きく表示をしたり、お得な情報をアピールすることが多いですが、高級レストランですので、シンプルにお店の紹介文と料理の紹介(→メニューへの誘導)、シェフたちのご紹介(→Cuillerについいてへの誘導)、インフォメーションのみをトップページに掲載いたしました。
このシンプルさがまた高級感の演出に繋がるのではないかと考えています。
(3)重くなりすぎないカラーリング
トップページにアクセスしていただいて、いきなり重いなと感じられるとすぐにページを離れられる可能性がございます。
そこで、2層のカラーリングを行うことで上部は明るく、下部は落ち着いた配色に致しました。
また、このままだと上部が浮いてしまうので、一番上にアクセントでメインカラーの原色を置くことで、ページ全体の引き締まりを演出しようと致しました。
*作品URL
HAL東京・名古屋・大阪の三校合同で実施したコンテストに提出したWEBサイトです。大阪でのテーマは「天王寺動物園」でした。
コンテストの結果は銀賞でした。
今回考えたのは近くには新世界があり、高級感というよりは親しみやすい街であること。そして、お子様がご覧になるということです。
そこで、親しみやすいデザイン・お子様にも食い入るように見ていただけるように可愛らしく間隔を多く取り入れたデザインにしています。
*作品URL
システム開発の学内課題にてチーム(4人)で作成致しました。 そのチームのリーダーを担当し、デザインとコーディング、プレゼンテーションは100%私が担当し、 書類関係(要件定義書、DMM、DFD、テーブル定義など)やプログラムは全員で協力して作成いたしました。
結果的にはIT学部の2クラス合同で納品プレゼンテーションを行い、投票により、1位を頂くことが出来ました。
*店舗詳細情報
個人経営の小さなミュージックショップで、イメージとしてはタワーレコードと同じような商品を取り扱っているが、取扱数は少ない。
実店舗における売上の低迷のため、オンラインショップを作ることで、新規顧客の獲得を狙う。
現状として若年層の顧客が少ないため、オンラインショップはその層をターゲットとしたい。
*サイト形態
オンラインショップ
*こだわりのポイント
(1)ポップなイメージで
ミュージックショップということもあり、ピンクを用いたポップなデザインにさせていただきました。
小さなお店であるという風に伺っており、若年層の顧客があまりいないとのことなので、実店舗は今まであまり派手な感じではなく、若い人が入りやすい雰囲気では無かったのではないかと考えました。
そこで、明るいカラーリングを行うことで、若い人が興味を持ち、その後利用していただくという狙いがございます。
(2)お得な情報を大きくアピール
小さなお店だからこそ、お客様にとって有益な情報は大きくアピールすることで、お客様の購買意欲の促進を促そうという狙いがございます。
トップページに「セール&キャンペーン」情報や、「店長のイチオシ!」コーナーをまず設置しているのもそれが狙いです。
*作品URL
※トップページ以外はアップデートしておりません。
システム開発の学内課題にてチーム(3人)で作成しております。
そのチームのリーダーを担当し、企画案、デザイン、トップページのコーディング、プレゼンテーションは100%私が担当し、
書類関係(要件定義書、DMM、、テーブル定義など)やコーディング、プログラムは全員で協力して作成しております。
現状でお見せできるものはトップページのみとなります。
トップページ以外のコーディングに関してはメンバーが行ったものですので、公開しておりません。
*作品URL
お問い合わせはこちらからお願い致します。