原晴紀/情報デザイン研究II

One Step

メンズメイク仲間を増やすためのwebサイト

• 原 晴紀
• Keywords：mens, make up, web, Notion
• OneStep
  
  
  前期はこちら→情報デザイン研究I
  
  

概要

これは何？

メンズメイクが気になっている男性に向けたまとめサイト

背景

近年、男性もメイクをすることが増え、自分自身も大学一年生からメイクを始めて自分に自信を持つことができた。しかし、メンズメイクを気になってはいるが始め方が分からなかったり、人の目が気になる男性も多いと思う。

目的

自身のエピソードやドラッグストアで働いている経験、メイクの簡単なやり方、アイテムをまとめることでリアルな視点での発信をし、メンズメイクが気になっている男性が一歩踏み出せるようなきっかけづくりをする。

コンセプト

• 身近な人に相談するかのような距離感
• 一歩踏み出して、素敵な自分に出会う
  
  

成果物の仕様

webサイト

制作ツール

• Notion
• Adobe Photoshop
• Adobe Illustrator
• STUDIO
  
  

プロジェクトの期間

2025.04.08 - 2026.01.07 通年

まとめ

メンズメイクの魅力を伝えるためにはどうかをしっかりと考え、ブログなど日々の自分がメイクを楽しんでいる様子をしっかりと伝えられるようなサイト作りを心がけた。また自分自身の記録を続けたことで自身のメイクの変化やどんな時に何を使っているかなどの結果を得ることもできた。今後も更新を続け魅力あるサイト作りに力を入れていきたい。

調査

現状調査

• 第1回 メンズ美容定点調査
• メンズ美容を2年間学んだ僕が思う、メンズメイクのハードル
• メンズメイクって気持ち悪い？300人超えの女性の生の声から男性の化粧に対する印象を分析
  
  
• 実際に男性がメイクをすることについてよく思わない女性よりも良いと思う女性の割合が高い。
• メンズメイクのやり方や始め方などは調べればたくさん出てくるが、化粧品メーカーのビジネスチックなものや美容関連のお仕事に携わっているような方のものが多い。
  
  
• 男性美容部員さんに聞いてわかったこと
  • ネットに出回っているメンズメイクのやり方は女性のメイクを参考にしているものが多い（メンズメイクはまだ未開拓なものである）
  • 人の目が気になりメイクするのを躊躇う男性が多い
    
    

先行事例

• 【メンズメイク】初心者でもできるやり方＆おすすめアイテムをプロが伝授！
• メンズメイクで清潔感を！初心者さんでも簡単にできる自然に見せるメイク方法「日中の皮脂テカ防止」「ひげカバー」「眉メイク 」を解説
• COSMEHOLIC!～メイクとコスメ〜
• BUBBLISM BLOG (バブリズム ブログ)
  
  

技法・技術情報

• Notion使い方ガイド
• 【万能アプリ】Notionとは？何がスゴイ？使い方や活用事例、料金などについてわかりやすく解説
• ノーコードツールSTUDIOの使い方を制作会社が徹底解説！
  
  
  
  

プロジェクト管理

スケジュール

リンクはこちら

ToDo

-制作ツールの選定
-サイトマップ作成
-ワイヤーフレーム作成
-試作

• 素材集め・作成
  -中間発表準備

2025.01.07

進捗

• メイクブログ　1件更新
• 化粧品レビュー　2件更新
  サイトはこちら
  Notionはこちら
  
  

累計

• メイクブログ　36件
• 化粧品レビュー　13件
• メイク解説　3件
  
  

2025.12.22

進捗

• メイクブログ　1件更新
• 化粧品レビュー　2件更新
  サイトはこちら
  Notionはこちら
  
  

2025.12.15

進捗

• メイクブログ　1件更新
• 概要集完成
  サイトはこちら
  Notionはこちら
  概要集はこちら
  
  

2025.12.08

進捗

• メイクブログ　2件更新
• 更新日の編集
  サイトはこちら
  Notionはこちら
  
  

2025.12.01

進捗

• サイト全体の調整
  • CMS記事投稿（メイクブログ、商品レビュー）
• メイク解説一件更新
• 商品レビューの中身　9件
  サイトはこちら
  Notionはこちら
  概要集はこちら
  
  

2025.11.24

進捗

• サイト全体の調整
  • CMS記事まとめページの設定（メイクブログ、商品レビュー）
• メイクブログの中身　最新まで更新完了
• 商品レビューの中身　9件
  サイトはこちら
  Notionはこちら
  概要集はこちら
  
  

2025.11.17

試作進捗

• ページ作成
  • CMS記事の設定（メイクブログ、商品レビュー）
• メイクブログの中身　12件
  サイトはこちら
  Notionはこちら
  
  

2025.10.27

試作進捗

• レスポンシブ設定
• メイクブログの中身　7件
  サイトはこちら
  Notionはこちら
  
  

2025.10.20

メイクブログの中身

• 今日の目的
• 主なアイテム
• 感想・学び
  
  
  

試作進捗

• レスポンシブ設定
• ダミーCMS記事の設定(商品レビュー)
  サイトはこちら
  
  
  メイク解説は固定ページで制作した方が良いかもしれない
  
  

2025.10.13

試作進捗

• レスポンシブ設定
• ダミーCMS記事の設定（メイクブログ）
  サイトはこちら
  
  

2025.10.06

ワイヤーフレーム

試作

サイトはこちら

コンテンツについて

• ブログ　10個以上
• 解説　3個
• レビュー　４個以上
  
  

2025.09.29

ワイヤーフレーム

アイデア

• 商品レビューが増やしにくいので、アフィリエイト広告のようなものが出るようにする
  →STUDIOで広告を出すことが難しそう
• アルバイト先の美容部員さんと何かする（例：フルメイクしてもらう）
  
  

技法

• ノーコードツールSTUDIOの使い方を制作会社が徹底解説！
• 副業Webデザイナー必須ノーコードツールSTUDIOの基本使い方徹底解説
  
  

2025.09.22

参考サイト

• COSMEHOLIC!～メイクとコスメ〜
• BUBBLISM BLOG (バブリズム ブログ)
  
  

制作ツール

STUDIO

• CMS機能を用いてコンテンツをうまくまとめることに注力する
• テンプレートを参考にデザイン構築する
  
  

サイトマップ

2025.09.15

webサイト制作ツール選定

• WordPress（情報をまとめることに集中できる）
  【初心者向け】WordPressの使い方マニュアル！もう難しいなんて言わせない
• Visual Studio Code（サイト構築を学びながら制作ができる）
  VSCode(VisualStudioCode)の定番機能を一挙解説
• ノーコードツール Studioなど（直感的な操作で制作ができる）
  ノーコードツールSTUDIOの使い方を制作会社が徹底解説！
  
  
  今後もコンテンツを増やし継続していけるものが良い