C O M P O N E N T
Remember, you're a crucial part of an organization or project ensuring smooth operations
I want to work smoothly.
become part of the company
C
わたしについて
ABOUT ME
畑中 恵子
2024年5月よりWeb制作会社にてデザイナーとして勤務し、媒体を問わず幅広い制作や運用に携わっております。
私の強みは、UI/UXの最適化と実装効率を両立させたデザイン設計です。
制作会社での実務に加え、個人顧客のブログ制作やブライダル業界の広告LP・SNS制作など、多角的な視点から実績を積んでまいりました。
現在は、要件定義から実装までを見据えたデザイナーを目指し、デザイン本や色彩学に加え、SEO、行動心理学、コーディング技術の習得にも日々励んでおります。
C
。
。
作品紹介
WORK
2024.07ー2026.06
バナー制作からコーディングまで、顧客の目的に応じた幅広い設計に携わってまいりました。 本ポートフォリオでは、7つのカテゴリーに分けてご紹介いたします。
p
スキル紹介
SKILL
DESIGN
01
実装を見据えた再現性の高いWebデザイン制作と、入稿時不備のない印刷物制作で、スムーズな納品を実現いたします。
Figma
デザインツールの中で最も得意としており、Web制作時にツール独自の機能を最大限活用いたします。
「display:flex」を前提としたレイヤー設計に加え、デザイン共有時には、プロトタイプ機能で社内と顧客の認識のズレを防ぎます。
Adobe Photoshop
画像編集において、低解像度画像の修復や切り抜き、レタッチを中心に使用いたします。
新機能の生成アップスケールやスーパーズームなどを組み合わせ、自然な仕上がりを実現いたします。
Adobe illustrator
印刷物制作に使用し、アウトライン化や画像リンク管理、トンボ・ガイド・カラープロファイルの最適化で、スムーズな入稿を心掛けております。
文字化け防止のため、ファイル名は英語表記で統一いたします。
Power Point
既存の営業資料の情報整理に使用し、立体パーツ・図版・アイコンの作成を得意としております。
スライドマスターを適切に管理し、一貫性を保ちながら100ページ規模の資料改修や運用ガイドラインの作成が可能です。
Adobe XD
Figmaと同様、Web制作時に使用いたします。
「display:flex」を前提とした再現性の高いレイヤー設計に加え、デザイン共有時には、プロトタイプ機能で社内と顧客の認識のズレを防ぎます。
Adobe Bridge
低解像度画像の修復に使用し、過度な補正による画質劣化を防ぎつつ、適切な処理を行います。
より自然で高品質な仕上がりを目指し、現在もスキル向上に取り組んでおります。
Adobe Firefly
適切な素材が必要な場合に使用し、実写に近い人物画像の生成を得意としております。
目的の画像を効率的に生成するため、AIが指示を学び、積極的に実行しております。
READ MORE
CODING
02
Visual Studio Codeを使用し、レスポンシブデザインに特化した、スマートフォン/タブレット/PCそれぞれのブレイクポイントを考慮したレイアウト設計が可能です。
HTML
運用・保守の観点から、過不足の無いマークアップで、cssの手詰まりを防ぎます。
また、Emmetを活用した効率的な記述と、第三者が理解しやすいコメントを徹底いたします。
CSS
詳細度を理解し、mixinやextendなどのSassを活用した効率的なデザインの再現が可能です。
画面横幅1024pxからの可変オブジェクトのバランス調節を得意とします。
SCSS
人為的なミスやバグを減らすため、SCSSのネスト構造を用い、変数を最大限活用することで、css時の手間を省き、メンテナンス性に優れた設計を行います。
jQuery
主に、ハンバーガーボタン、スライドアニメーション、スムーススクロール、その他基本的なアニメーションの実装が可能です。
JavaScript
主に、ハンバーガーボタン、スライドアニメーション、スムーススクロール、その他基本的なアニメーションの実装が可能です。
READ MORE
OFFICE
03
ビジネスルールを遵守したコミュニケーションツールのやり取りに加え、オフィスツールを用いた制作案件進行管理を行います。
Slack
コミュニケーションツールやリマインダーとして使用いたします。
Excel
デザイン指示書・修正指示書の確認時や、タスク管理の際に使用いたします。
Word
デザイン指示書・修正指示書確認時に使用いたします。
Adobe Acrobat
デザイン指示書・修正指示書の確認、およびデザイン共有時の情報連携ツールとして使用いたします。
ChatWork
コミュニケーションツールとして使用いたします。
Quip
メモやタスク管理の際に使用いたします。
READ MORE
書籍
BOOK
スムーズなプロジェクト進行のために、要件定義から実装までを見据えたデザイナーを目指し、就業時間外や通勤時間を利用して学んだ書籍をご紹介いたします。
ほんとに、フォント。
フォントに重きを置いたデザインを学んだ一冊です。
本書をきっかけに、単調な表現から、自由で読みやすい表現へと発想を広げることができました。
多様なフォントを知ると同時に、文字を一からデザインすることも可能になり、フォントに対する理解と表現の幅を一歩前進させました。
あたらしい、あしらい。
装飾に重きを置いたデザインを学んだ一冊です。
線や柄を使った繊細な表現から力強い表現まで幅広く掲載されており、特に繊細な表現に影響を受け、線と柄の扱いが得意となりました。
けっきょく、よはく。
余白に重きを置いたデザインを学んだ一冊です。 本書を通して、各案件のブランドイメージにおいて、コンテンツ間とラインハイトの重要性を再認識いたしました。
あるあるデザイン
デザインの「よくある失敗パターン」の回避方法を学んだ一冊です。
本書を通して、制作において“なんかダサい”“読みにくい”デザインを、上流過程から回避する方法を得ました。
奇抜さや目新しさよりも、"伝わる""読める""使える"の3軸を基本に、安定したクオリティを担保したデザインを制作いたします。
いろいろな、いろ。
色を"どう選べばそれっぽくなるのか"を学んだ一冊です。
色を数値やルールで縛るのではなく、「どういう気持ち・印象・状況にこの色が効くのか」を言葉と見た目でセットにしているため、色彩学とは違った角度の知見が広がりました。
本書を通して、色彩学から逸脱した配色状況において、要望や意図に沿ったトーン配色が可能になりました。
コンセプトの教科書
コンセプトは制作者にとっての設計書であり、商品は“体験”として選ばれるという考え方を学んだ一冊です。
「コンセプトの存在しないものはない」という一文を軸に、各案件の抽象的な指示や脱線に対して、臆せず問い続ける姿勢を癖付けました。
なるほどデザイン
デザインの制作意図を正確に伝える方法を学べた一冊です。
デザイナーとは翻訳機であり、言語表現と非言語表現を行き来させて齟齬をなくすことで、伝わりやすいデザインが生まれるという理解のもと、デザイン説明において、言語化の幅を広げました。
また、アイコンやイラストを用いる際の責任についても強く意識するきっかけとなりました。
色彩検定3級
色彩調和を主としたPCCSという色彩体系のもと、色相環やトーン、配色の考え方、光と視覚の仕組、インテリアとファッションコーディネートを学んだ一冊です。
色同士の関係性を数値や図で理解できたことで、これまで感覚に頼っていた配色にも根拠を持つようになりました。
色彩検定2級
国際的に採用されているマンセル表色系という色彩体系をもとに、色相環、配色の考え方、光と視覚の仕組、インテリア・ファッション・景観、ユニバーサルデザインを学んだ一冊です。
ユニバーサルデザインにおいて、先天的な要因や歳と共に色覚以上を持つ人が一定数存在すると知り、必要に応じてWebセーフカラーを使用するようにいたしました。
10年つかえるSEOの基本
SEO対策の目的は、検索結果で1位を取るためではなく、ユーザーにとって親切なサイトを作ることであると学んだ一冊です。
検索エンジンは、画像ではなくHTMLの文字情報やWF設計をもとにクロール・インデックスを行うため、正しいマークアップや情報構築の段階から意識して制作をするようにいたしました。
また、その他の評価基準として、こまめな更新や被リンク、著者の引用といった、信頼の積み重ねを要すると知り、SEOは長期的な視点で取り組むべきであると理解いたしました。
10年はかどるSEOの基本
SEO対策に加え、ユーザーに配慮したWF設計やプロジェクトの進め方までを体系的に学んだ一冊です。
前半では『10年使えるSEOの基本』の内容を深く掘り下げ、後半では、SEO知識が十分でない組織でプロジェクトを進める際の課題や、上司への説明、必要な人材など、実務を想定した対策を学びました。
自身はデザイナーとしてアウトプットする機会はありませんでしたが、今後そのようなプロジェクトに携わる際に備えて理解を深めてまいります。
Photoshop しっかり入門
2023年に訓練校から支給されたPhotoshop初心者用の教材で、基礎的な操作方法を学んだ一冊です。
本書を通して、通常の業務であれば手詰まりすることがないほどに、操作に必要な基盤知識を身に付けました。
illustrator しっかり入門
illustrator初心者用の教材で、基礎的な操作方法を学んだ一冊です。
本書を通して、入稿・納品時の所作であるリンク配置やアウトライン化、レイヤー整理など、操作に必要な基盤知識を身に付けました。
「説明が上手い人」がやっていることを一冊にまとめてみた
前提知識の異なる相手にわかりやすく伝える具体的な手法を学べる一冊です。
WEB制作の現場で、異なるポジションの人に正確に意図を伝えたい思いから購入しました。
定量データを用いて現在地を示す方法、具体例を増やして説得力を高める方法、前例のないケースでは近しい事例を組み合わせて根拠と共に提示する方法などを学び、業務時間内に活用しております。
レイアウト・デザインの教科書
2023年に訓練校から支給されたデザイン制作初心者用の教材で、デザインの4原則や、デザインはルールに基づき論理的に成り立っていることを学んだ1冊です。
制作ルールが不明瞭な案件において、本書で得た知識を基準とすることで、方向性を見失わずに制作を進めております。
デザイン入門教室
主に”印刷物デザインを前提とした教材”という印象を受けた一冊です。
各項目ごとに基礎から一歩踏み込んだ知識まで丁寧に解説されており、全体を通してデザインの基礎理解を深めることができました。
本書を通して、印刷物制作において違和感のないカーニングを意識しております。
HTML5&CSS3 標準デザイン講座
2023年に訓練校から支給されたコーディング初心者用の教材で、HTMLの基礎からレスポンシブデザイン、CSSアニメーションまで学んだ1冊です。
本書を通して、何か参照をしなくても手を止めずに記述ができるほどの技術を身に身に付けました。
jQuery 標準デザイン講座
2023年に訓練校から支給されたアニメーション初心者用の教材で、テンプレートから段階的に学べる一冊です。
授業にて、〇〇、〇〇、〇〇、〇〇、〇〇、〇〇、〇〇、等の実装の経験があり、実務のコーディング案件にて、〇〇、〇〇、〇〇、〇〇、の実装に成功し、納品をしております。
一冊ですべて身につく JavaScript 入門講座
JavaScriptをテンプレートから段階的に学べる一冊です。
jQueryはサイトを重くするなどのデメリットがあると知り、VANILLA JSを一から学ぶ目的で購入しました。
本書を活用して、徐々にjQueryの使用頻度を減らし、サイトパフォーマンスの良いJavaScriptに全アニメーションをシフトしていく予定です。
動くWebデザインアイディア帳 基本編
基本的なJavaScriptアニメーションの実装方法を学んだ一冊です。
お客様と相対する際に、視覚的に動きを伝えるためにWEB版を活用し、理想に近い実装に近づけるよう心掛けております。
動くWebデザインアイディア帳 実践編
WEB版を通して『基本編』では扱われていなかった、複雑なJavaScriptアニメーションを学んだ一冊です。
現時点では実務での活用機会はありませんが、使用する際にはクライアントのターゲットや目的から逸脱しないよう、適切に取り入れていく予定です。
1冊ですべて身につく WordPress入門講座
サーバー・ドメインの設定から有料テーマの活用、HTMLの組み込み方法までを学んだ一冊です。
授業にて、〇〇、〇〇、〇〇、〇〇、〇〇、〇〇、〇〇、等の実装の経験があります。
現時点では形に残るCMSサイトはございませんが、今後はCMSサイトを構築し、SEOで学んだ知識を検証していく予定です。
READ MORE
CONTACT
お気軽にお問い合わせください。