Mika Kobayashi

mainvisual_pc

Portfolio
Mika Kobayashi

Scroll

Website
ウェブ制作

Past Works
過去のDTP制作

About
自己紹介

MIKA KOBAYASHI

英語教師として務めた後、美術作品を取り扱う会社で広報を担当しました。ウェブサイトリニューアルに携わった経験から、その魅力に惹かれ、職業訓練校にてウェブサイト制作を学びました。これまで広報として考え続けた「どのように表現し、より魅力を伝えるか」という経験を活かし、WEB制作に取り組んでまいります。


SKILLS

HTML / CSS / Javascript / Figma / Photoshop / Illustrator / Wordpress / Word / Excel / PowerPoint


CERTIFICATE

Webクリエイター能力認定試験 / HTML5 エキスパート


Website | 課題制作

架空のネイルサロン
Nail C

ツール
Figma / VsCode / Photoshop
制作範囲
企画、コーディング
制作期間
企画、デザイン…3日
コーディング…4日
ターゲット
20代後半以上の女性

架空のネイルサロンから、落ち着いてじっくり相談できるというイメージが伝わるウェブサイトを作りたいという依頼を受けた設定で、ウェブサイトを制作しました。ベージュを基調とした色合いにし、ふわっとした動きをつけ、柔らかで落ち着いたデザインを目指しました。いくつかのFigma Communityのテンプレートをもとに制作したため、レイアウトの調整に時間がかかりましたが、Web表示の際の文字の大きさや、余白、色味のバランス、フリー素材の使い方を学ぶことができました。

Website | 授業制作

架空の洋菓子店 CHALON

ツール
VsCode / WordPress
制作範囲
コーディング、ワードプレス
制作期間
コーディング…7日
ワードプレス…4日

架空の洋菓子店CHALONのウェブサイトを、職業訓練校の授業時間内にコーディングし、オリジナルテーマとしてワードプレス化しました。複数ページのデザイン統一方法と、オリジナルテーマをワードプレスに入れ込む方法、プラグインの活用方法などを学ぶことができました。

Website | 課題制作

架空のプロフィールサイト

ツール
VsCode
制作範囲
企画、コーディング
制作期間
企画、デザイン…1日
コーディング…3日
ターゲット
美術関係者

架空のフリーランス学芸員のプロフィールサイトを制作しました。Javascriptを学び始めたばかりだったため、サイトにいくつか動きを入れる練習をしました。フリーランスの学芸員が仕事の案件を求めている姿勢を見せられたらと、コンタクトボタンを常に左下に表示させています。

Website | 授業制作

FOOD SCIENCE

ツール
VsCode / WordPress
制作範囲
オリジナルテーマを用いたワードプレス化
制作期間
ワードプレス…7日

教材『WordPress–仕事の現場でサッと使える!デザイン教科書』(技術評論社)をもとに、職業訓練校の授業時間内にワードプレス化しました。HTMLからPHPへの変換や、各種プラグインの実装を通してワードプレスでのウェブサイト制作を学ぶことができました。

Website | 自主制作

架空の飲食店
つまみ〜ず

ツール
Figma / Photoshop / VsCode
制作範囲
デザイン、コーディング
制作期間
デザイン…10日間
コーディング…9日間
ワードプレス…実装途中
ターゲット
少人数でゆっくり食事をしたい方

ワードプレス化を想定した架空の飲食店の店舗サイトを制作しました。飲食店の開業を考えている方から制作の相談を受けたため、実務を想定して、デザインカンプから制作まで打ち合わせを重ねて制作を進めました。店舗の事業内容が昼と夜で変わるという特徴が伝わるように、「昼」「夜」へのリンクをトップページ中央に大きく配置しました。配色には、イタリア国旗の配色をトーンを落として使用し、和紙のテクスチャーを組み合わせて2カ国の柔らかな融合をイメージできるようなデザインを目指しました。

バナー画像05
Banner | 自主制作

プロテインバナー

ツール
Illustrator / Photoshop
サイズ
300*250
制作期間
デザイン…4時間

架空のプロテインの、新フレーバー・ストロベリーシェイク味の広告バナーを作成しました。背景には、ピンク色の水飛沫といちごを散らし、視覚的に味が伝わるようにしました。プロテインのラベル上の文字を、容器に沿うように配置することが難しく、今後の課題となりました。

バナー画像04
Banner | 自主制作

ジム体験クラスバナー

ツール
Illustrator / Photoshop
サイズ
300*250
制作期間
デザイン…4時間

架空のグループトレーニング型フィットネス・ジムの、体験クラスバナーを制作しました。トレーニングを1人で続けている方が、「仲間とのグループレッスンを通して、更なる高みを目指せる」というイメージを付けたく、ムキムキの方を全面に押し出し、背景にはレッスンの様子を入れました。アクティブな方に訴求できたらと、緑のネオンカラーをアクセントカラーに使用しました。

バナー画像01
Banner | 課題制作

オンライン英語学習バナー

ツール
Illustrator / Photoshop
サイズ
300*250
制作期間
デザイン…2日

ターゲットを「英会話に興味がある20-40代のビジネスマン」とした架空のオンライン英語学習のバナーを制作しました。ビジネスシーンで活用できる英語力を想起できるよう配色は紺色と白を基調とし、「英語学習を通してキャリアアップが望める」が連想できるよう金色を使用しました。レイアウトはグリッドで安定感をもたせました。

バナー画像02
Banner | 課題制作

オンライン英語学習バナー

ツール
Illustrator / Photoshop
サイズ
300*250
制作期間
デザイン…1日

「英会話に興味がある20−30代の女性」をターゲットに、オンライン英語学習の宣伝バナーを制作しました。オンライン学習の自由度の高い側面を強調できたらと、キラキラした飾りパーツを各所に散らし、規則性のない流体シェイプを取り入れました。流体シェイプの一部に、ロゴの配色を取り入れて親和性を持たせています。

バナー画像01
Banner | 課題制作

観光ツアー販促バナー

ツール
Illustrator / Photoshop
サイズ
300*250
制作期間
デザイン…1日

架空の航空会社「DAL航空」が開催する熊本・阿蘇への観光販促バナーを作成しました。5月頃に開催されるキャンペーンとして、熊本の九重連山で咲くツツジの花を文字の一部に取り入れ、アクセントカラーにつつじ色を使用しました。

Brochure | 2019

Anna Lucas展覧会
「One Second Feature」チラシ

ツール
Illustrator / Photoshop
サイズ
210*297mm
制作期間
デザイン…5日

2019年、大学院のカリキュラムの一環として開催したアーティストAnna Lucasの個展「One Second Feature」の展覧会案内を制作しました。A4の両面に印刷し、山折り・谷折りに折りたたみ、小さな冊子になるように作りました。表紙のポケットは、会場地図が差し込めるようになっております。

過去作品01
Magazine | 2017

批評誌『ヱクリヲ』Vol.5 表紙

ツール
Illustrator / Photoshop
サイズ
148*210mm
制作期間
デザイン…3日

2017年に発行した批評誌『ヱクリヲ』Vol.5の電子書籍の表紙を制作しました。神代辰巳特集だったため、お顔を背景に入れ、今の時代にもう一度批評しなおすという意味合いを込めて、2017年代にやや流行していたグラデーションカラーを使用しました。

現在も電子書籍販売中です

過去作品02
会場の様子
Magazine | 2014

批評誌『ヱクリヲ』Vol.1 表紙

ツール
Illustrator / Photoshop
サイズ
148*210mm
制作期間
デザイン…5日

2014年に発行した批評誌『ヱクリヲ』Vol.1の表紙を制作しました。初刊ということで、販売イベント「文学フリーマーケット」のブースで使用するPOPとポスターを制作しました。この時初めてPhotoshopとIllustratorを使用しましたが、フリーマーケットで目立つように、できる限りデザインを統一するように努めました。立ち寄ってくださる方が多数いらっしゃり、このイベントで初刊をほぼ売り切ることができました。

Curation | 2022

展覧会企画ポートフォリオ

ツール
InDesign / Illustrator / Photoshop
サイズ
210*297mm

2019年から2022年までに企画と運営に携わった展覧会をまとめたポートフォリオです。資料には、展覧会の会場写真と担当した役割を記載しております。海外の方に向けて、英語で作成いたしました。