制作物たち
| 作品名 | 焼き鳥と牡蠣のお店『はさよけ』 |
|---|---|
| 制作人数 | 1人 |
| ターゲット | 幅広い年齢層(20代～80代)。お洒落で静かな居酒屋を探してる人 |
| 制作時間 | 4日間 ※レスポンシブ可 |
| 使用ツール | html / css / jquery / Canva |
| リンク | こちらをクリック！ |
- コンセプト
- お洒落なお店を探してるけど「居酒屋が良い....。」居酒屋が良いけど「ガヤガヤしてるのが嫌...。」という人が一目でわかるようなサイトにしました。
- デザイン
- 「あっ、ここはお洒落な雰囲気の居酒屋なのかな」と思ってもらえるように、画像の淵にシャドウを付けたり、空白の使い方にこだわりました。同じ訓練校の方がposition stickyを活用した制作をしていたので、使ってみました。1Fと2Fの部分に使い、それぞれのフロアの雰囲気を一目でわかるようにしました。
- 苦労した所
- 初めてposition stickyとbackground-attachment fixedを使いました。思った通り、動かなかったり他の部分がおかしくなったりと扱いに慣れるまでが大変でした。
| 作品名 | HAYO&NERO |
|---|---|
| 制作人数 | 1人 |
| ターゲット | 社会人や寝具にこだわりのある人。20代～60代の男女。 |
| 制作時間 | 3日間 ※レスポンシブ可 |
| 使用ツール | html / css / jquery / Canva |
| リンク | こちらをクリック！ |
- コンセプト
- いつも使ってる寝具を乗り換えてほしい。実際に寝てみて、寝具のブランド事にある『違い』に気づいてほしい。
- デザイン
- 最初は背景を真っ白にしていたが、個人的に温かみが欲しかったので、少しベージュっぽい白に変更しました。文字の色も、真っ黒だと違和感を感じたので、少しグレーが入った黒を使い、説明の部分には更にグレーを加えて読みやすくしました。全体的に、目にも優しい温かみのある色のデザインにしました。
- 苦労した所
- しっくりくる背景を探すのにいろんなサイトや、色を変えては見て、を繰り返した所。文字と文字の高さの空白と、一つ一つの区切りを表す空白の調整がとても苦労しました。この時期はテーブルタグが苦手だったのですが、使うことが多いタグなので苦手ながらに工夫して使いました。
| 作品名 | ポートフォリオ |
|---|---|
| 制作人数 | 1人 |
| 制作時間 | 2日間※レスポンシブ可 |
| 使用ツール | html / css / jquery / java script |
| リンク | こちらをクリック！ |
- コンセプト
- 第一印象:ゲームが好き。 第二印象:見やすい。 第三印象:遊び心がある。
- デザイン
- ゲーム好きが直ぐに伝わるように、ドットフォントを使いました。見やすいけど、ちょっとした小細工をあえてPC画面サイズだけにしました。topページに掲載した作品は、特に見てほしい物を二つずつピックアップしてます。worksページはスクロールだけで全部が見れるようにして、制作物の何番目を見ているのかが分かるように光らせています。
- 苦労した所
- 左寄せのheaderメニューどうやって作るの？から私の苦労が始まりました。自分で調べたり、教えてもらったりして、2つのやり方が判明したのでtopページとworksページ、違うやり方で左寄せしています。jqueryとjava scriptを使いたいと思い使ってみたところ、動かない・光らない・他の部分がおかしくなった の繰り返しでした。いろんなサイトをみたり、友人に教えてもらいながら、コードに反映させた結果できました。これを機にjqueryから勉強を始めました。
| 作品名 | ふらっと水族館 |
|---|---|
| 制作人数 | 4人 |
| 担当箇所 | リーダー：top/navメニュー・映像・波・SNS部分・館内案内・FAQ・全体のコード調整 |
| ターゲット | 幅広い年齢層。特にファミリーやカップル。生き物と触れ合いたい人たち。 |
| 制作時間 | 2週間※レスポンシブ 一部不可 |
| リンク | こちらをクリック！ |
- コンセプト
- お一人でも、ご家族でも『ふらっと』たち寄れる水族館
- デザイン
- headerからfooterにかけて背景をグラデーションにして、下にスクロールしていくと深海になっていくようにしました。グループメンバーの「水族館にこれがあったらいいなぁ」を詰め込んでいます。全体的に背景は寂しく見えてしまいますが、海の中をイメージして制作したので、グラデーションも含めて楽しめるようにしました。
- 苦労した所
- 細かい部分が決まっていない状態で各々担当箇所に入ったので、出来上がったものの、フォントや見出しの大きさなどが全員バラバラになってしまった事。コードを合わせたときにjqueryやcssの(../)ズレで全く反応されなかったり、気づかないで後で判明した部分があったこと。途中一名抜けてしまい、空いた箇所を急遽担当した事。
| 作品名 | 冬物セール バナー |
|---|---|
| ターゲット | セール好きな人、20代～40代のファッションサイトを見てる人 |
| 制作時間 | 1時間 |
| 使用ツール | illustrator |
- デザイン
- 青色を使いたかったので、相性の良い黄色を文字に取り入れました。文字だけで仕上がってしまったので、『winter sail』に目をつけてキャラクターのように可愛くしました。
- 苦労した所
- illustratorで初めて作った作品でした。実際制作側になると、こだわりや、色遣い、見栄えが難しく、お題を定める事が一番苦労しました。
| 作品名 | 缶シリーズのNEW商品!! |
|---|---|
| ターゲット | 10代～30代の青春してる男女 |
| 制作時間 | 3時間 |
| 使用ツール | illustrator |
- デザイン
- 『青春時代のあの味』をコンセプトとしていた為、背景は夕焼け、更に手紙を添えて青春ぽさを出しました。缶のデザインも形から全て制作しました。
- 苦労した所
- 缶に一番時間がかかりました。左右対称にならなかったり、一部をグループ化すると、他の部分でズレが起きたりと、2時間近く時間がかかりました。次はラベル制作と、リベンジで缶を制作したいです。
| 作品名 | 地域のマスコットも見てよ！ |
|---|---|
| ターゲット | 旅行大好きな男女 |
| 制作時間 | 2時間 |
| 使用ツール | Photoshop |
- デザイン
- 観光もしてほしいけど、ご当地キャラクターも含めて観光を楽しんでほしい。と思い、私が北海道で一番好きな『ずーしーほっきー』を使用しました。メインはご当地キャラクターですが、その他の有名な観光名所を添えて、上の文字の部分は米の形にして隙間なく観光名所や、特産品などを制作しました。
- 苦労した所
- 意外と影づくりに苦労してしまいました。「なんか違う」を20分近く繰り返していました。
| 作品名 | |
|---|---|
| ターゲット | |
| 制作時間 | |
| 使用ツール |
- デザイン
- 苦労した所
| 作品名 | 居酒屋まなクル:限定企画 |
|---|---|
| ターゲット | 20代～30代 お酒が大好きな人。好奇心旺盛な人 |
| 制作時間 | 2時間 |
| 使用ツール | illustrator |
- デザイン
- お酒＝ビールのイメージがあるので、ビールをモチーフにして、居酒屋＝夜の時間帯だと思うので文字などは紺色にしました。目に止まりやすいと思ったので「挑戦者募集中」を赤字にし、興味をひかせるようなデザインにしています。
- 苦労した所
- 取り入れたい要素を全部いれて、文字を薄くしたり、小さくしたりして全部の文字が活かせるように頑張りました。泡の形が納得いかなくて何回もやり直しました
| 作品名 | みなと水族館:短期企画 |
|---|---|
| ターゲット | 小さいお子様。ファミリー連れの方。 |
| 制作時間 | 1時間 |
| 使用ツール | Photoshop |
- デザイン
- 事件&謎解き風に仕上げました。黒黄テープで区切って、惜しまなく要素を詰め込んでいます。
- 苦労した所
- くしゃくしゃな紙の背景を探すのに時間かかりました。
| 作品名 | |
|---|---|
| ターゲット | |
| 制作時間 | |
| 使用ツール |
- デザイン
- 苦労した所
| 作品名 | |
|---|---|
| ターゲット | |
| 制作時間 | |
| 使用ツール |
- デザイン
- 苦労した所