マガジンのカバー画像

ママスぺWebデザイン講座

11
本
ママスぺWebデザイン講座の課題として制作したもの。
運営しているクリエイター
MIYAKO

ママスペースWebデザイン講座課題 SP版デザインカンプ_メニュー画面

第5回目の講義では、第3,4回の講義にて制作(見本をトレース)したPC版のデザインカンプを元に、SP版のデザインカンプを制作しました。 …と書くとちょっとすごいですが、実際にはこちらも見本をトレースしたのが大半で、ヘッダーとハンバーガーメニューを開いた時の画面デザインのみオリジナルになります。笑 ■見本となるPCカンプのFV ■SP版カンプのFV(ヘッダー部分) ・意識したポイント ①ヘッダーにWeb予約ボタンを入れる 　→このサイトを訪れるお客様に促したい行動No.1

MIYAKO

バナー制作｜Instagram投稿用 子育て相談募集

ついに納品！！！！ しばらくWebデザイン講座リデザインの方に注力していたため 前回の提案から少し間をあけました。 その間にママスペースさんのInstagramのこれまでの投稿や、 同期受講者が作るバナーを見て「ママスペらしさ」を再考。 ゼロから見直すということをしました。 --- 以下、納品までの制作過程を残します。 1.再提案したもの クライアントからの要望 ・ハッシュタグの位置に理念テキスト ・下部のロゴはキャラ入りに変更 ・キャラとテキストを水平にする 2.

MIYAKO

LPファーストビュー｜デザイン講座SP版FV(リデザイン)

Webデザイン講座が終わり、実績製作をかねたママスペ案件を受注中なので 製作の過程と共にポートフォリオとして更新します。 今回は私が受講したママスペWebデザイン講座の SP版サイトのFVリデザイン案を提出しました。 ・元画像(SP版) ちなみにPC版はこんな感じ。SP版はPC版画像の左半分だけが表示されている状態です。 出来上がったものがこちら。 --- 以下、制作の過程です。 1.まずはレイアウト決め。仮案としてご確認いただき、方向性を決めます。 これはPC

MIYAKO

バナー制作｜Instagram投稿用 子育て相談募集

まだ納品はできていないのですが、 Webデザイン講座が終わり、実績製作をかねたママスペ案件を受注中なので 製作の過程と共にポートフォリオとして更新します。 ◯画像のイメージ ママスペースがママを包み込んでいるようなイメージ画像 ママ目線で子育て相談をしたくなる（バナーを押したくなる）デザイン テキストは頂いたものをそのままor少し改変して作成。 ・1枚目 　フォント：源柔ゴシック 　文字色：f49dc1、666464 　背景色：facada 　ママと子どもが繋がる画像　

MIYAKO

ママスペースWebデザイン講座課題 デザインカンプ(サイト全体編)

こちらで作成したワイヤーフレームから、デザインカンプを作成しました。 長くなるのでFV編とサイト全体編の二本立てにします。 依頼内容 ・表参道にあるカフェのWebサイト ・ターゲットは20～30代の女性、キレイ系OL ・サイトはシンプルに。ごちゃごちゃさせない。 ・instagramには価格やメニューを載せておらず、写真から興味を持ったユーザがプロフィール→サイトアクセス→来店という流れが理想 ・TOPページ内には人気メニューを4つ掲載。他は下層ページへ。 ・Web予約は受

MIYAKO

ママスペースWebデザイン講座課題 デザインカンプ(FV編)

こちらで作成したワイヤーフレームから、デザインカンプを作成しました。 長くなるのでFV編とサイト全体編の二本立てにします。 依頼内容 ・表参道にあるカフェのWebサイト ・ターゲットは20～30代の女性、キレイ系OL ・サイトはシンプルに。ごちゃごちゃさせない。 ・instagramには価格やメニューを載せておらず、写真から興味を持ったユーザがプロフィール→サイトアクセス→来店という流れが理想 ・TOPページ内には人気メニューを4つ掲載。他は下層ページへ。 ・Web予約は受

MIYAKO

ママスペースWebデザイン講座課題 ワイヤフレーム

第二回の講義にて作成したワイヤーフレームです。 依頼内容 ・表参道にあるカフェのWebサイト ・ターゲットは20～30代の女性、キレイ系OL ・サイトはシンプルに。ごちゃごちゃさせない。 ・instagramには価格やメニューを載せておらず、写真から興味を持ったユーザがプロフィール→サイトアクセス→来店という流れが理想 ・TOPページ内には人気メニューを4つ掲載。他は下層ページへ。 ・Web予約は受け付けていないため、場所は時間の情報のみでOK。 必要なコンテンツ ・キー

MIYAKO

ママスペースWebデザイン講座課題 リクルート

提出1回目 ・難しかった点 　①フォントの選定 　→Identifontを利用して探したが「未経験から～」のフォントが探せず、 　　とても時間がかかった。 　②カーブ文字の作成と配置 　→楕円形を使ったカーブ文字をうまく配置できず、 　　今回はワープ文字＋自由変形で角度をつけることで解決した。 ・知りたいこと 　カーブ文字を作成する際、楕円形のサイズや配置する位置のコツ。 講師からのアドバイス カーブ文字のコツは文字のカーブをイメージして楕円を作ること。 ワープ機能はカ

MIYAKO

ママスペースWebデザイン講座課題 SPRING COLLECTION

↑見本 ↑制作物 ・難しかった点 ①角が内側に丸くなっている白い外枠の作成 　→境界線が白の長方形の上に、境界線白・塗りピンクの円を乗せ 　　レイヤーマスクをかけて各シェイプの不要な部分を消して対応した。 ②MOREの右上の白い角の作成 　→正方形を作成しレイヤーマスクをかけ、不要な部分を消して対応した。 ③画像の背景の白抜き 　→背景の複雑さやモデルのヘアスタイルにより 　　白抜きの難易度が上がったので背景が単調な画像を選んで対応した。 　　春らしさが失われた。(反

MIYAKO

ママスペースWebデザイン講座課題 DRINK MENU

提出1回目 素材写真自体がドリンクにフォーカスされていることもあり、 1回目の提出ではポスターのようなイメージで作成していた。　 (後の指摘により認識) ・難しかった点 　①文字を映えさせること 　→背景に暗い箇所と明るい箇所が混在していて 　　部分的に文字が読み辛くなるところがあったため、 　　黒背景を不透明度40%で敷き、文字色を引き立たせた。 　②画像のドリンクを活かしたレイアウト 　→ドリンクに視線をフォーカスしたかったので 　　背景写真の色味を少しだけ変更・不

MIYAKO

ママスペースWebデザイン講座

育休に入る頃から独学しようとしていたデザイン。 1年で結局何も身についている気がせず、 中途半端に終わりそうだったので思い切り ママスペースさんのWebデザイン講座の受講を決めました。 講師はニュアンスカラーデザインが可愛くてファンだったKAORIさん💕 フィードバックを受けつつ、素敵なデザインができるように 日々精進したいと思います🥰 復職までに1円でも良いからお金を頂くこと、 最終的にデザイナーへ転向することを目的に頑張ります💪 では記念すべき第一弾🙌 ■FOOD

MIYAKO