Hello ‘my’ world!

島田真実のポートフォリオサイトです。 制作した作品をモノリス風にまとめました。

ささやかではありますが私が築き上げてきた 「私文明」をご覧いただけると幸いです。

Works

動画アプリ~AdvenTube~

色彩ツール~Color Pallet~

ハート型のチラシ

リゾートホテルのステーショナリー

Monster缶のデザイン

CDジャケットとレーベル

桶狭間の戦いフライヤー

オープンキャンパスバナー

歯科医の名刺

SF風天気予報サイト

アプリUI〜環境感知アプリ〜

プロフィール画像

ポカリトレース

About

島田 真実
Shimada Makoto

→facebook

専門学校でWebデザインを学習中。
フロントエンドエンジニア志望。

動画アプリ~AdvenTube~

〇製作意図

学校でのwebアプリ制作の講義内で制作しました。この課題ではUXデザインの手法を取り入れて、アプリの企画から実装までを行いました。

〇製作過程

今回はUX手法というデザイン思考を活用した方法でアプリの企画を行い、開発までしました。下の写真のように同級生にインタビューを行い、それをもとにペルソナを作り上げました。

そして、そのペルソナが実際に行動しそうなシナリオを作成し、シナリオに沿ったUIのプロトタイピングを行いました。

〇ペルソナとシナリオの概要

今回設定したペルソナは、女子専門学校生で、日頃バラエティ系のYoutubeの動画を見ているという設定です。そして、特に気に入った動画を何度も繰り返し見るという見方をしています。本人はその見方を楽しんではいるのですが、同時に同じものを繰り返し見るという時間の過ごし方を不安に思っており、動画を見る時間を減らしたいとも思っています。

〇企画立案

今回のゴールはYouTubeの利用時間を減らすこと。ということで、真っ先に思い付くのは時間制限を設けること。ですが、これではせっかくの趣味である動画視聴の時間が窮屈になってしまうと思い却下しました。そこで、思いついたのは今までに視聴した時間を記録することで動画を見る時間がどれくらいなのかを意識させること。しかしこれでも窮屈感があることは、まだ否めません。そこで、さらに視聴時間で成長するゲーム的な要素を加えることで、楽しみながら動画の視聴時間を意識できるのではと考えました。

〇完成品

完成品(使用例)の画像 動画アプリ~AdvenTube~

スマートフォンでのみの利用を考えて作成したアプリなので、パソコンで開くとデザインが崩れます。お手数ですが、パソコンからご覧になる方は開発者ツール等を利用し、スマートフォンの画像サイズになるようにしてから閲覧をお願いします。

基本的な使い方です。まず、検索機能を使って登録したい動画を検索し、+ボタンで追加します。追加した動画が初めて追加するチャンネルの動画だったら、自動的に新しいキャラクターが生成されます。そうでなければ、すでにあるキャラクターの所に動画が追加されます。そして、ゲームメニューから見たいチャンネルを選び、その動画を視聴するとそのチャンネルにあてられたキャラクターが成長します。

今あげているものはテスト用なのでレベルがすぐに上がるようになっていますが、本番用の経験値テーブルでは50時間程度でレベル上限に到達するように想定してあります。

また。ゲームデータの保存にはLocal Storageを利用しており、それぞれの利用者のブラウザにデータが保存されるようになっています。

色彩ツール~Color Palette~

〇製作意図

学校でのコンテンツ制作の講義内で制作しました。この課題はD3.jsというライブラリを使って、データビジュアライゼーションの作品を作るという課題でした。

その課題が出たころ、ちょうど色彩検定の勉強をしており、PCCSというカラーシステムについて学んでました。これのトーンマップをカラーコードにして使えるようにすると便利そうだなと思い、題材にしました。

PCCSとは|DICカラーデザイン株式会社

PCCSについては上記リンクから説明を見ることができます。

〇仕様説明

Color Pallete

上記リンクから完成品の閲覧が可能です。スマホでの使用は想定していないので、PCから閲覧をお願いします。

まず、基本的な操作としては右手側にある円の集合でトーンの切り替えができます。そして下から2段目の列のスイッチで色相を変えることができます。

ビビットトーンと無彩色については別枠で用意して、選択できるようにしてあります。

選択した色は左上の枠にPCCS表記の色名、RGBの値、HEX値とともに表示されるようになっています。

また、選択した色は+ボタンで一時的に保存ができ、後で見返すことができるようになっています。

また、backgroundボタンを押すことで選択中の色に背景色を変更することができます。

ハート型のチラシ

〇製作意図

学校でのグラフィックデザインの講義内で制作しました。この課題では奇形グラフィックを題材にデザインを行いました。講義の最終課題として出されたもので、今まで取り組んできた課題の総復習を兼ねたものになっています。

〇状況設定

「美容室エフ81」のチラシを作るという設定です。チラシには設定された情報を全部入れつつ、ハートの形に収めるようにということでした。

〇美容室のイメージ

今回はナチュラルウッドなインテリアがあるような、柔らかい雰囲気の美容室を想定して作りました。ターゲットとなるのは20代から30代くらいの女性で、落ち着いた雰囲気を出しつつカジュアルなデザインになるようにしました。

〇デザインのポイント

今回は用意されたスペースに対して情報量がとても多く、きれいなレイアウトを行いつつ、デザイン性を保つということは難しそうだと考えました。そこで、発想を逆転させて「多少ごちゃごちゃしていてもおかしくないものは何だろう」と考えました。そのあたりを考慮しつつ、美容室の雰囲気を崩さないものを考えた結果、「コルクボード」を模したデザインとなりました。

〇完成品

完成品の画像 完成品(使用例)の画像

リゾートホテルのステーショナリー

〇製作意図

学校でのグラフィックデザインの講義内で制作しました。この課題ではグラデーションを題材にデザインを行いました。

〇状況設定

グラデーションを取り入れつつ、リゾートホテルのステーショナリーをデザインするという課題です。

〇リゾートホテルの想定

リゾートホテルについては各々設定してもらって構わないということでした。山岳リゾートでも温泉リゾートでもいいということでしたが、私はオーソドックスに海水浴場のあるリゾートを想定してデザインを行いました。

〇モチーフの決定

今回はリゾートホテルということで、非日常感、泡沫の夢、海、といった連想から泡をモチーフにすることにしました。また、ベースカラーはギリシャなどの観光地にある白亜の建物を連想させるような純白を用いました。

〇グラデーションの利用

ロゴ

今回のデザインではグラデーションを2か所に取り入れています。まずはロゴの部分です。ロゴの上部に光を想定することで、泡が浮かび上がる様子を表現しています。

模様

そしてもう一か所は泡のイメージの模様の部分です。この部分はp5.jsというライブラリを使って、JavaScriptでランダム生成をして、いい感じになった時のものを利用しています。x軸にあわせて彩度を変化させるようにして、グラデーションになるようにしています。

〇完成品

今回は、便箋、封筒、名刺、コースターを作成しました。

完成品の画像 完成品(使用例)の画像

Monster缶のデザイン

〇製作意図

学校でのグラフィックデザインの講義内で制作しました。この課題ではカラースキームを題材にデザインを行いました。

〇状況設定

美しい自然の写真から色を抽出して、新しいMONSTER ENERGYのデザインを行うという課題です。私は色の抽出の際は紫色の花にとまるアゲハチョウの写真を使いました。

美しい自然の写真

〇商品イメージ

商品のイメージを想定したほうがスムーズにデザインができそうだと考えたため、架空のMONSTER ENERGYの商品を想定しました。その名前は「MONSTER ENERGY ELEGANT BUTTERFLY」です。調べてみたところMONSTER ENERGYにはジュースに近い感じの「KHAOS」や、コーヒーに近い感じの「JAVA」など味ごとにいくつか種類があります。ということで今回想定したのは、女性向けの優しめの刺激でハーブティーフレーバーの「ELEGANT」シリーズのMONSTER ENERGY、その中で飲んだ時の爽快感が強めの「BUTTERFLY」という商品です。

〇デザインのポイント

今回は女性向けの優美なデザインということで、写真の中にある色の中で淡いトーンの紫をベースにしました。MONSTERのロゴはアゲハチョウに見立てて配色を行いました。また、周囲の装飾として植物をモチーフにしたラインをかたどりました。

〇完成品

完成品の画像 完成品(使用例)の画像

CDジャケットとレーベル

〇製作意図

学校でのグラフィックデザインの講義内で制作しました。この課題では幾何学形の利用を題材にデザインを行いました。

〇状況設定

自分が好きな曲のリズムや音をイメージしてそれを四角、丸、三角、ひし形などの幾何学形で表現し、それでCDのジャケットとレーベルを作るという設定です。

〇選曲

選曲は自由に行って良いということだったので、自分の好きな音楽ゲームから引っ張ってきました。わかどりさんの「Night Theater」という曲で以下のような曲となっております。全体的にトランス調の曲ですが、ジャズピアノも入ってくるというような曲です。

〇デザインのポイント

今回は曲中でトランス調の部分が鳴りを潜めてピアノソロになる部分を切り取ってCDジャケットとレーベルをデザインしました。中心にはピアノを模したデザインにスポットライトを当てた風にして、ピアノソロを表現しました。そして、それまでになっていたトランス調の音楽は、暗い配色の平行四辺形で明かりのついていないネオンをイメージして表現しました。

〇完成品

完成品(使用例)の画像 完成品(使用例)の画像

桶狭間の戦いフライヤー

〇製作意図

学校でのグラフィックデザインの講義内で制作しました。この課題ではグリッドデザインを題材にしており、それを意識したデザインとなっております。

〇状況設定

現代人に向けて「桶狭間の戦い」のフライヤーを作るという設定です。織田信長、今川義元、日時、場所、「狙うは今川義元ただ一人なり」のキャッチコピーなどの要素を必須で入れる必要があります。

グリッドの画像

〇グリッドの形

今回はグリッドデザインということでグリッドとなる図形を決める必要があり、それは以下の図のような形になりました。戦国時代に関連付けて矢羽のような図形をグリッドとして用いました。また、織田信長と今川義元の対立構造を強調するため、境界でグリッドの向きを反転させるようにしています。

完成品の画像

〇デザインのポイント

織田信長と今川義元の対立がわかりやすいように、格闘ゲームのキャラ選択画面のような赤コーナー、青コーナーをイメージして作りました。また、戦国時代ということで全体の雰囲気を和風にし色も渋めのものでまとめました。その中で織田信長を「ノッブ」、今川義元を「ヨッシー」と記すことで現代人に向けた、ややキャッチーな部分も表現しました。

〇完成品

完成品(掲示板に貼り付け)の画像

オープンキャンパスバナー

〇製作意図

学校でのグラフィックデザインの講義内で制作しました。この課題ではタイポグラフィを題材にしていて、文字を中心としたデザインになっております。

〇状況設定

様々な大きさのオープンキャンパスのバナーをタイポグラフィでデザインするという設定です。開催日、「オープンキャンパス」という文字、学校名が必須要項となっております。

〇デザインのポイント

文字中心のデザインということで文字をできるだけ大きく、印象深く残らせるようにデザインしました。また、インパクトを重視したフォント、配色を行い、画像に負けないような目立つデザインとなっています。

〇完成品

完成品の画像

歯科医の名刺

〇製作意図

学校でのグラフィックデザインの講義内で制作しました。この作品はこの講義で一番最初に出された課題で、その時点での力試しも兼ねていました。

〇状況設定

異なる2つの設定の歯科医の名刺を作りました。1つ目は、海外の最先端の技術を取り入れているような先進的な矯正歯科。2つ目は若いお母さんをターゲットにした親しみやすいこども歯科。これらの2つの名刺を作りました。

矯正歯科の名刺の画像

〇矯正歯科の名刺

最先端の技術をしているということで、モダンなデザインになるように設計しました。配色もそれに準じて、濃紺を中心に行っています。立方体を歯を斜め上から見たものに見立てて、その側面に名刺の内容を配置しました。フォントは高級感が出るように明朝体のものを使いました。また、ロゴについては名刺全体のデザインと同様に歯を斜め上から見たものを落とし込んでいます。

こども歯科の名刺の画像

〇こども歯科の名刺

親しみやすいこども歯科ということで、全体的に明るくカジュアルなデザインにしました。歯医者に関連付けて、くるみ割り人形風のキャラクターを作成し、それを中心にレイアウトを行いました。フォントは親しみやすい感じが出るように丸めの柔らかいものを選びました。また、ロゴについては、くるみ割り人形→おもちゃの兵隊→国旗、と連想していって、国旗のようなデザインのものにしました。

〇完成品

完成品(使用例)の画像

SF風天気予報サイト

〇完成品

→SF風天気予報サイト(https://tilestyle.info/weather/)

〇製作意図

私は動きのあるサイトやテーマ色の強いサイトに興味があり、日々の生活を彩るため、そういったものを日常で見るWebサイトやアプリにより多く取り入れさせたいと思っています。その身近なものの一例として、天気予報に動きや世界観を取り入れさせることにしました。そのテーマとして、伝わりやすく、動きも多く取り入れられそうなSF風のデザインを取り扱うことにしました。ここでいうSF風デザインとは「アイアンマン」や「マトリックス」などの映画作品に出てきそうな、少し古い近未来的なイメージのデザインのことです。

〇アピールポイント

1つ目はAjaxでデータを取得している点です。今回、天気予報のデータを取得する際に、「Open Weather Map」という、フリーのAPIからデータを取得しました。Ajaxで取得しているため、場所を切り替えた際には瞬時にデータが切り替わるようになっています。

2つ目は雲量、湿度、風向などのメーターの表示です。これらは取得したデータに合わせてゲージの幅や示す方角が変化するようになっています。そのために視覚で感覚的に情報を得られるようになっています。

3つ目は両側の傾きです。SF風な要素の一つにエアディスプレイやホログラムなどの立体的な画面の表現があります。平面的な画面で立体を表現するために両側の要素を傾け、コックピットのようにしました。

アプリUI〜環境感知アプリ〜

〇製作意図

これは学校の課題の一環で制作したものの一つです。室内の温度や湿度、二酸化炭素濃度を専用の機器で測定し、それを表示するモバイルアプリのUIデザインの設計をしました。その際に、アプリを使用する人のペルソナがいくつか設定されていて、ランダムに指定されたものを作成するという課題でした。私が担当したペルソナは要約すると「カフェを利用する女子大生」で、そのカフェの室内環境を表示するためのアプリのUIデザインを行いました。

〇機能要件の設定

「カフェを利用する女子大生」ということで、アプリを利用する人は基本的にはカフェの利用客です。そのため、提供する情報は最低限に絞ったもののほうがよいでしょう。というわけで、機器からは様々な数値をとることができますが、今回は厚生労働省が提示している室内環境の基準に大きくかかわる、「温度」、「湿度」、「二酸化炭素濃度」、そして座席率から割り出すことを想定した「混雑度」を表示します。表示は具体的な数値だけではなく、直感的にも理解できるようにA~Cの評価値も採用します。

また、このアプリを利用するときのことを考えると、「自分が行きたいと思っている時間帯の店内の環境がどうなっていそうか知りたい」というのが重要な目的の一つと考えられます。それを叶えるために、今までの傾向から作成した室内環境の予報をアプリで表示することにしました。

さらに、ペルソナの設定の一つに「友人とカフェに行く」という記述があったので、情報の共有がしやすいように、共有機能を付けることにしました。

〇デザイン設計

厳密ではありませんがGoogleのマテリアルデザインを参考に制作しました。配色やタイポグラフィも以下のようにGoogleのものから同様に参考にしてデザインを行いました。

〇制作物

XDでアプリデザインを行い、以下のようにプロトタイプで動きもある程度再現しました。

プロフィール画像

〇製作意図

Webデザイナーとして活動する上で、SNS等に載せるプロフィール画像は、まさしくその人の顔となるため、とても重要です。自分がどんなことを生業としていて、どういう人間なのか伝わるようにすることを目標に制作を行いました。

〇アナログの制作物からの着想

どういったものを作ろうか考えた際に、学校のグラフィックデザインの授業で行った課題の一つを思い出しました。その課題は「自分のシルエットに自分らしさを表現した模様を入れて作品を作ろう」というものでした。その作品が下のものになります。

眼鏡を左手で押し上げているシルエットにデジタル数字やモールス信号、点字などの模様を乗せました。私は自身の容姿について端的に言えば「インテリメガネ」といった感じだと思っているので、それを彷彿とさせるシルエットを採用しました。模様の内容もそれに合わせて、賢く見えるようにデジタル数字を採用しました。ただ、書いてある内容をとても簡単な足し算引き算にして、賢く見えるけど考えていることは割と素直で実直で単純である自分の内面を表現しています。また、寝ぐせの立ったシルエットを使っていることで、雰囲気が固くなりすぎないようにもしています。

〇デジタルへの落とし込み

上記の制作物は、アクリルガッシュでの制作に慣れていないため、塗りが荒く、配色も自分が思っているようにはいきませんでした。ですので、Illustratorを使ってデジタルに落とし込んでから、プロフィール画像として用いることにしました。プロフィール画像として使うため、小さく映ることが多いことを考慮して、デジタル数字は大きめにする、メガネの色は目立ちやすいようにデジタル数字の緑の補色の赤を使う、などの工夫をリメイクする際に行いました。

ポカリトレース

〇製作意図

学校の課題として制作したものの一つです。Illustratorを使い始めてから2~3ヶ月ぐらいたったころに技術や観察力の向上のために行われた課題です。

〇製作物

下の画像は制作したものと、もとになった写真や制作したアウトラインと比較したものです。