What's
Inoue Karin

scroll

web - 1
web - 2
web - 3
other

3D建築パースデザイナーのポートフォリオサイト

制作期間 2ヶ月(デザイン1ヶ月 + コーディング1ヶ月)

使用ソフト XD,Photoshop,Illustrator,Dreamweaver

使用言語 HTML5,CSS3,Javascript,jQuery

自分のポートフォリオサイト

制作期間 1ヶ月半(デザイン1ヶ月 + コーディング2週間)

使用ソフト XD,Photoshop,Illustrator,Dreamweaver

使用言語 HTML5,CSS3,Javascript,jQuery

宅配野菜サービスのLP

制作期間 3週間(デザイン2週間 + コーディング1週間)

使用ソフト Photoshop,Illustrator,Dreamweaver

使用言語 HTML5,CSS3

Concept

・ クライアントは設計士から発注されたパース(建物の完成予想図)を制作するデザイナーで、サイトのターゲットは30〜50代の男性設計士です。 ・ サイトコンセプトは、「初めて発注するターゲットが、クラインアントを信用できるような名刺代わりとなるポートフォリオサイト」です。 ・ ターゲットが事前に仕事の全体像を把握して安心できるよう、過去作品に加えて目安費用や納期、経歴の掲載を提案しました。 ・ デザインコンセプトは「作品が目立つシンプル」と「クラインアントの仕事ぶりを表すスマート」です。 過去作品を引き立たたせるため、全体的に色味・装飾を抑えて複雑ではないデザインを意識しました。 ターゲットがクライアントを信用するクオリティを保ちながら納期を必ず守る誠実さと、 細部まで作り込む丁寧な仕事への姿勢を、 細いライン使いやフォント選びによってデザインとして落とし込むことで、 ターゲットにスマートな印象を与えられるよう意識しました。

Main Visual

web_1/2 web_1/3

・ メインビジュアルはCG技術をアピールするため、クライアントの作品でも特に高度なCGを使った作品を選びました。 ・ 実際のクライアントにお会いした際に、落ち着いた&垢抜けてお洒落な印象を受けました。 パースは製作者のさじ加減によって、完成品は全く異なるものになります。 私が感じたクラインアントの印象をターゲットにも伝えることが出来れば 「この人の感性に任せれば、いい塩梅に仕上げてくれそう」という印象を持ってもらえるのではないかと考え、 音楽バーのような、洗練されて落ち着いた雰囲気を目指しました。 ・ 上記のような印象を表すシンボルとしてロゴも作成しました。

Contents

web_1/4 web_1/5

・ 作品紹介ページでは、価格帯・制作日数を記載することで、施工主との打ち合わせ日や外注予算と照らし合わせて、実際の発注を具体的にイメージできるようにしました。 また、ターゲットは問い合わせから納品までの流れが見通せることでより安心感を持ってクライアントに発注できると考え、業務の流れを記載したページを作成することを提案いたしました。 ・ 問い合わせ窓口に関しては、連絡先を記載して直接連絡を取るのではなく、セキュリティー対策のためフォームを埋め込む方法を採用しました。 ・ UIデザインに関しては、余白を生かした配置とフォントにこだわりました。余白はピクセル数を固定して統一し、関連性の高い要素は近く・低い要素は離すことで情報が読み取りやすいように配慮しました。文字間隔も広く取り、読みやすいサイトを心掛けました。また、フォントは英字見出し・英字本文・日本語本文の3種類で種類を分け、ページ内での優先順位に応じて太さも変えることで、視認性を高めるられるよう意識しました。 ・ UXデザインに関しては、ターゲットが依頼予定パースの類似事例を素早く見ることができるよう、過去作品をカテゴリ別に表示する構成を提案いたしました。学校の授業範囲外であるjQueryの学習に取り組み、タブの切替表示を実装することで、実現することができました。

Concept

・ サイトコンセプトは、「制作活動の過程・意図を伝え、採用後の伸びしろをイメージしてもらえるようなポートフォリオサイト」です。 作品紹介ページでは、「なぜこのデザインにしたのか」の意図を説明するスペースを大きく取りました。 意図を持ってデザインする思考力は、これからデザイナーとして成長できる可能性を示せる材料になると考えたためです。 また、全体的に余白を多めに取って要素を少なくし、要点が整理された構成を目指しました。 ・ デザインコンセプトは「柔と品」です。 私は、周りから「ソフトで落ち着いているがよく笑う」と評されることが多いです。 実際、争いや競争は好まず温厚な性格で、話し方やリアクションも控え目ですが、人と話すことは楽しく好きです。 このように、対極に感じられる要素を持つ自分の性格を伝えられるデザインを目指し、上記のコンセプトに至りました。 丸モチーフや丸いフォントを基調とし、柔和な感じを表現しました。反対に、コンテンツの区切りや画像は四角形にし、細いフォント・ラインで鋭さを取り入れることで、 フワフワとし過ぎないようにバランスを取るだけでなく、落ち着いた上品な感じにまとまるように意識しました。 また、配色に関しては、メインビジュアル・背景では淡く明るい色味を、強調される見出し・ラインにはブラウンを用いることで、柔らかさと明るさを表現しました。 アクセントカラーには深い赤色を使うことで、全体を引き締め大人っぽく品のある印象を作り出せるよう心掛けました。

Main Visual

・ ファーストビューでは、「どんな人なんだろう」と想像してもらう・興味を持ってもらうことを意識しました。 そのため、背景には具体的なモチーフや写真ではなく、マーブル模様のイメージを作成しました。 ・ キャッチコピーは左右でフォント・装飾を変えて崩すことで、背景に溶け込み過ぎずに目に止まることを目指しました。

Contents

・ UIデザインに関しては、プロフィールページのスキル部分の視認性にこだわりました。 ターゲットが必要とする人材と私のスキルを照らしわせて、簡単に確認できるように、文字ではなくグラフで表記しました。 そのため、jQueryの自主学習を進め、Chrart.jsというプラグインを使用することで、簡潔に示すことができたと考えております。 ・ UXデザインに関しては、テーゲットにとっては制作物をチェックすることが一番の目的だと考え、リンク先への誘導を重視し、 ページ上部のプレビュー・中盤と下部にボタンを配置することで、どこからでも飛べるように工夫しました。 また、スムーズに操作ができるUX設計を目指し、jQueryを自主学習しました。 例えば、上下にカテゴリー名のタブを配置し、クリックするとプレビュー位置へのページ内リンクを設定することで、順番に制作物を見ていけるような導線を意識しました。 他には、いつでもグローバルナビゲーションに戻れるよう、ページ上部に戻るボタンを設置しました。

Concept

・ 学校の課題として、コンセプトを「食へのこだわりが強い層に向けた、お試し購入へ導くためのLP」と仮定し、ワイヤーフレーム決定後のデザインを行いました。 ・ お試し購入への誘導の他に訴求したい事項として、優先順位に並べると、オーガニック野菜であること・農家をセレクトしていること・産地直送で新鮮であること・旬にこだわっていることでした。 ・ ターゲットは、まだ成長期の子どもがいる20代後半〜40代前半のママで、 普通のスーパーの1.5倍程度に食にお金をかけられ、食にこだわる自分が好きで、「ていねいな暮らし」が好きなタイプです。 ・ デザインコンセプトは「新鮮さ・安心感」でした。 参考サイトだけでなく、同じ層をターゲットにしている雑誌も読み込みました。 優先的に訴求したい事項でもあったオーガニック食品に関連するページでは、ナチュラルで安心感のある暖色系ベージュが多く使われていたため、 安心感を表す色味として全体的にベージュ・ピンクベージュを基調とし、新鮮さを表す差し色として赤色を選びました。 また、食にお金をかけられる層がターゲットではありますが、成長期の子どももいる経済状況を考慮すると、 全体的に高級感を抑えて、手が出しやすいと感じる親しみやすさを表現することを意識しました。

Main Visual

web_2/2 web_2/3

・デザインコンセプトの新鮮さと、訴求したい事項であったオーガニック野菜であること・産地直送であることを表すため、 ファーストビューには土や水滴のついた野菜の写真を選びました。 ・横書きはスラスラ読めるが、縦書きは視線を向ける回数が多く注意深く読む状態だと学び、 訴求したい事項が詰まっているキャッチコピーは縦書きにしました。

Contents

web_2/4 web_2/5

・ UIデザインに関しては、今回の一番の目的であるお試し購入へ誘導性を高めるため、特にボタンにこだわりました。 差し色の赤色でベタ塗りし、ページ内で一番目を引くようにしました。 また、ターゲットに合わせて、高級過ぎず親しみやすさを感じるデザインにするため、ボタンには野菜のイラストを配置し、可愛らしさを出しました。 ・ 内容量が多いため、ダラダラと続かず読みやすいページという印象にしたく、背景色や画像を使いコンテンツごとの区切りを意識しました。

Concept

Photoshop / Illustrator の技術向上とデザイン練習のため、様々な広告やアイコンなどを制作しており、 WEBサイトの作品以外は、外部ポートフォリオサイトに都度アップしています。 インプットするだけでなく、使いこなすにはアウトプットが何よりも重要だと考えており、 これからも、この精神を忘れずに、日々知識の習得や技術の向上に努めたいです。

web - 1
web - 2
web - 3
other