DESIGN
2019
第8回数学・数理科学のためのキャリアパスセミナー
Ａ2ポスター Illustrator
クライアントの要望：
お任せ
船出をイメージしました。
2018
数理キャリアデザインセミナー2018
Ａ4ポスター Illustrator
クライアントの要望：
お任せ
テキストの量が多いのが堅苦しくならず、セミナーに参加しやすいようなデザインにしました。昨年からメインモチーフは鳥。社会へ羽ばたっていく学生をイメージしました。
第7回数学・数理科学のためのキャリアパスセミナー
A4, A2ポスター Illustrator, Photoshop
クライアントの要望：
数学的要素を入れ、目立つように。
テーマはモロッコで幾何学文様で数学的要素を出しました。
第8回数学・数理科学のためのキャリアパスセミナー
A4, A2ポスター Illustrator, Photoshop
クライアントの要望：
数学的要素を入れ、目立つように。
今回の花はさるすべり。動きを出しました。
2017
数理キャリアデザインセミナー2017
A4ポスター Illustrator
クライアントの要望：
お任せ
親しみやすいようなデザインを心がけました。
数学・数理科学専攻若手研究者のための異分野点異業種研究交流会2017年
A2ポスター Illustrator
クライアントの要望：
A4, A2, 概要集, 賞状のデザインの作成
数学的要素を入れ、目立つように。
前回はインパクトがなかったため目を引くような配色にしたく、開催時期に咲いているであろう椿をメインモチーフにしました。
2016
第6回数学・数理科学のためのキャリアパスセミナー
A4, A2ポスター Illustrator, Photoshop
クライアントの要望：
数学的要素を入れること。
ポリゴンを取り入れたデザインにしたかったのと、カメレオンだと色が面白いかなと思いました。
数学・数理科学専攻若手研究者のための異分野点異業種研究交流会2016年
A4, A2ポスター Illustrator, Photoshop
クライアントの要望：
A4, A2, 概要集, 賞状のデザインの作成
数学的要素を入ること。
透明感と希望を表現しました。数学科の学生の就職活動の役割をもつ交流会で多くの学生に参加してもらいたく堅苦しいイメージを少し和らげるようなデザインを心がけました。数式が取り込まれた水晶で数学的要素を入れました。
賞状図案
B4 Illustrator, Photoshop
クライアントの要望：
通常の横長の賞状でなく賞状らしくないデザインにしてほしい。
明るく色が綺麗で秋を感じさせるようなデザインにしました。
2015
数学・数理科学専攻若手研究者のための異分野点異業種研究交流会2015年
A4, A2ポスターIllustrator, Photoshop
クライアントの要望：
A4, A2, 概要集, 賞状のデザインの作成
数学的要素を入ること。
若手研究者のための研究交流会ということでフレッシュかつ高揚感を出すため、ピンクと青系の配色、動きのある模様を配置しました。紅葉のような肺胞のような木で数学的要素を出しました。
地図
Illustrator
東京大学駒場キャンパスⅠの地図
概要集に載せるために作成。緑系統の色で統一。
2015年日本数学会入会のおさそい
A4, A2ポスター Illustrator
クライアントの要望：
日本数学会のロゴである桜を用いたデザイン。
2013年から2015年まで同じ図案・色違いで作成。
イラストは右下のトーラス以外は作成。
WEB DESIGN
2019
Inami ERATO
プロジェクト紹介サイト
ERATOとは（独）科学技術振興機構が実施する戦略的創造研究推進事業におけるプログラムの一つ (wikipediaより)で、サイトを作成し、研究をアピールするためのサイトです。
レスポンシブ＆グリッドにするためBootstrapを使用し、
主にコーディングを担当。
トップページはスライドを取り入れモノトーンを基調とする。
こだわったところ：
トップのナビゲーションは固定でスライドの上のみ文字色は白、それ以外では黒。日本語ページのときはEnglishのみ表示。
数段階のレスポンシブ。
About ページ
Projectページ
各プロジェクトのページ
トップの写真のみ横幅が広がる。
Memberページ
写真をクリックするとポップアップで拡大表示されます。
Memberページ
ウィンドウ幅を狭めると段組が変わる
Topページ
モバイルでの表示
2018
Patchwork House
プロモーションサイト
住宅をリフォームし賃貸住宅として貸し出すまでの過程を公開するためのサイト。
クライアントの要望：
写真を引き立つようにグレー＆シンプル
トップ画像にカルーセル
レスポンシブ＆グリッドにするためBootstrapを使用し、
デザインからコーディングまですべて作成。
Plan ページ
Progress と Plan、Peopleページは同じ構成で通常幅で3列。
Phographは4列。それぞれの記事をクリックすると個別のページに遷移するようにします。
Peopleページ
レスポンシブデザインでタブレット、モバイルにも対応。
Galleryページ
Galleryページ
写真をクリックするとポップアップで拡大表示されます。
バナー
ポイントサイトのトップページ内のカルーセルバナー
年始の特集で賑やか＋おめでたい感じを出すため金箔風の背景と赤系のモチーフを組み合わせました。
日松竹梅や凧等を散りばめることで日本のお正月を表現しました。イラスト等の素材も作成。
2017
Butterflies and Insects
旅の記録をつけるための写真を中心としたブログサイト
WordPeressを使用し独自のテーマで作成しました。
海の写真が多いのでサイトのメインカラーは青でポイントカラーの黄色はボタンをホバーした時の色に使用。
シンプルに見せるためサムネイルのみを格子状に並べました。サムネイルをクリックすると記事ページに遷移します。
Insects ページ
カテゴリー毎にヘッダー画像が変わるようにしました。
Sea life ページ
Islands の記事ページ
musimusi photoblog
写真を中心としたブログサイト
文章は少なく、写真をテトリスのように並べるためJavaScriptのライブラリMasonryを使用。
ウィンドウ幅に応じて記事が自動的に並び替えられます。画像はクリックするとモーダルウィンドウで大きく表示されようにしました。
Travel ページ
記事部分はモノトーンとカラーバージョンを切り替えられるようになっています。
ウィンドウ広めのカラーバージョン
モーダルウィンドウでの表示
Swallowtail ページ
モバイルでの表示はメニューは上部に固定され、記事は1列に並びます。
Portfolio
ポートフォリオサイト
webデザインのスクールに通っていたときの卒業制作。
イラストからコーディングすべて作成。イラストはIllustratorを使用。
テーマは海の中。縦に長いレイアウトはスクロールすると背景が濃くなっていくグラデーションで海に潜っていく様子を表現しました。
難しかった点は画像の重なり。背景の魚影と泡は幾つかのパーツに分かれているので位置を合わせるに苦労しました。
ヘッダー
ヨットは右から左へスライドし、中央あたりでとまるcssのアニメーション。
ヨットが止まるとウサギが顔を出し帆がウサギより後ろにくるようにするために船艇・ウサギ・帆の3つのパーツに分けました。
About ページ
タイトルをホバーするとうさぎの向きが変わります。
これはホバー時
Gallery ページ
Galleryのサムネイル画像をクリックするとGalleryページに遷移します。
ABOUT
skills
Design
Illustrator
Photoshop
Pro create
Web Design
HTML5
CSS3
Wordpress
Bootstrap
JavaScript
PHP
MathJax