松下 洋子
大学でグラフィックデザインを学んだ後、印刷会社や洋菓子店でデザイン制作などをしていました。今までちょっとしかWebデザインに関わったことがないため、しっかり制作できるようになりたいと思い入校しました。
- 居住地
- 長崎県 長崎市
- メインビジュアルの写真は自宅近くで撮影しました。
- 好きなこと
- マンガを読むこと / DIY / 愛車のカスタマイズ
about
web
Hotto Connect（自主制作）
Figma
HTML
CSS
JS
Illustrator
Photoshop
Figmaとコーディングの学習をするため、架空企業のトップページを制作しました。無料コーディング練習所の入門編・初級編・上級編で公開されていたFigmaデータとコーディングを参考にしています。保守性・拡張性を高めるため、BEMを用いたCSS設計に挑戦しました。
制作箇所
・コンテンツ内容
・ロゴデザイン（Illustrator）
・写真加工（Photoshop）
・デザインカンプ（Figma）
・コーディング（HTML/CSS/JS）
斎藤司法書士事務所（課題制作）
WordPress
WordPressの無料テーマ「Lightning」を使って、コーディングをしないサイト制作を行いました。
授業終了後、事務所案内のコンテンツ内容を編集し、プラグイン「Contact Form 7」を導入してお問い合わせフォームを設置。どのようにテーマをカスタマイズしていくのかを学びました。
banner
介護施設バナー
300×250px
架空の介護施設名、掲載文章を考案し、50～60代の女性に向けて制作しました。ひと目で介護施設だと分かるようなテイストにしつつ、画像・文章などでアニマルセラピーを表現しています。明るくやすらぎに満ちた施設内の雰囲気を伝えるため、写真の色調や明瞭度を調整。要素の色をグリーンで統一し、文字と写真を中央揃えにして安心感を出しました。
生命保険バナー
300×250px
同じく架空の企業を設定し、「使いやすくリニューアルした自社の保険料見積もりサイトを宣伝する」目的のもと制作しました。子育て世代のターゲットに向けて親しみやすい家族のイラストを配置し、見出しなどをポップで明るいデザインにしています。気軽に見積もりできることが伝わるようにキャッチコピーを工夫し、ボタンを目立たせました。
スキンケア商品バナー
300×250px
同じく架空の企業を設定し、20～30代の女性に向けて制作しました。丁寧でナチュラルなブランドイメージを表現するため、優美で落ち着いたデザインにしています。ブラウンとピンクの配色で桜らしさを演出。商品画像は春の暖かい日差しを浴びたように加工し、光に近い位置に見出しを配置しました。
ファッションセールバナー
300×250px
10~20代半ばの女性向けのカジュアルなブランドなので敷居が高くならないように、ナチュラルで明るいデザインにしました。秋らしさを演出するため、オレンジ色を基調とし、紅葉やイチョウをアクセントにしています。「70」を10と読み間違えないように書体を選びました。
英会話スクールバナー
300×250px
無料キャンペーンを新規教室が実施しているため、20~40代のビジネスマンに信頼して受講してもらえるように、誠実・安心なデザインを目指しました。企業ロゴに合わせて、ビジネスでもよく用いられる青色を基調とした配色にしています。最も目立つように「無料体験実施中」を大きく配置して、反対色の黄色でマーカーを引きました。
font
Adobe Fontsの中で、特に好きなフォントを紹介します！
-
貂明朝
「かわいくも妖しい明朝体」というコンセプトでデザインされたフォントで、貂などのイラストは異字体として入力できます。
もっと癖がない方がいいなと思ったときは、貂明朝テキストがあります。最近、漫画向けの貂明朝アンチックがリリースされました。
個性的なのに使いやすいフォントです。 -
筑紫B丸ゴシック
古式ゆかしい温かみのある丸ゴシックで、様々なシーンに使える汎用性から日常でもよく見かけます。
Adobe Fontsでは筑紫A丸ゴシックも提供されており、本文にAを、見出しにBを……という使い分けができます。
提供元のフォントワークスさんは書体見本帖が可愛いです。 -
Interstate
アメリカの高速道路に使われていた書体をベースに作られたフォント。
斜めにカットされたようなエレメントが個性的で、見出しに使ったこともありました。
「カチッとしたビジネスや高校系の案件だけど、ちょっと遊び心が欲しい」というシーンにオススメです。