houwadesign
houwadesign
HOUWA portfolio
9 posts
バナー、イラスト、UIデザインの作品集です。
Don't wanna be here? Send us removal request.
houwadesign · 5 years ago
Photo
Tumblr media Tumblr media
■参加しているオンラインサロンでの企画で作成した名刺
モモンガオンラインサロン(http://momongaonline.designworksofficial.com/)での企画で作成した名刺デザインです。
■使用ツール IllustratorCC、PhotoshopCC ■作成時間 2h 2020.1 作成
■企画お題
名刺イメージは、ロゴタイプと同じイメージで。
・与えたいイメージは「親しみやすさ」+「スタイリッシュ」 ・美容室や女性雑誌のようなスタイリッシュなイメージ。 ・デザイナーぽく縦の名刺で ・GIVEをかたちに。と入れる かたちにはひらがなで。 ・名前→ モモンガ 花子 ・読み方→ ひらがなでもカタカナでもローマ字でもOK ・電話番号は、仮で 050-5372-2822 ・メールアドレスは、仮で [email protected] ・サロンのQRコード ・LINEのQRコードを入れ込む ・ロゴタイプは、サロンのロゴを使用 ・表面裏面を使って自由に作成 ・日本中のデザインクリエイター100名が在籍している というニュアンスのコピーもあれば良い
■気をつけた所 デザイナーの名刺という事だったので、肩書きにdesignerをプラス。 GIVEをかたちに。と入れる かたちにはひらがなで。 との指定だったので、「かたち」の部分は柔らかい印象になるようなフォントにしました。
モックアップを使用してクライアントに出来上がりをイメージしてもらいやすいように意識しました。
0 notes
houwadesign · 6 years ago
Photo
Tumblr media
赤から折尾浅川店様の食べ放題メニュー
概要    
赤から折尾浅川店様の食べ放題メニュー
制作の目的 
食べ放題メニューの強化による、集客目的に制作。
WEBサイト
http://www.akakara.jp/
デザイン
2つの食べ放題コースの情報がわかりやすい様にレイアウトに気をつけました。
サイズ
A3
担当範囲
デザイン
制作期間
3日
使用ツール
 Photoshop / Illustrator
ラフ
Tumblr media
0 notes
houwadesign · 6 years ago
Photo
Tumblr media
自身の名前ロゴ作りました
作成時間:ラフに15分、デジタル作業に1時間弱。
作成ソフト:Illustrator CC
名刺を作ることを考えて自身の名前ロゴを作ろうと思い立ち作成しました。
ラフ
Tumblr media
漢字から連想するモチーフを組み込んで作りました。
「宝」のウ冠の部分を王冠のモチーフにして点の部分を宝石のモチーフに。
王冠の部分のみ王冠っぽさが出るように色を変えました。
「輪」の車編に車輪のみモチーフを入れました。
感想
Illustratorにはまだ知らないツールがあるので、調べながら作成したのですが、こんなこともできるのだ!ということがわかって感動しました。
0 notes
houwadesign · 6 years ago
Photo
Tumblr media Tumblr media Tumblr media Tumblr media
山田ウィメンズクリニック(仮想サイト)
概要:産婦人科サイト
ターゲット:20〜30代のPMSに悩む女性。
制作のきっかけ:仮想サイトを作ろうと思った時は、自分自身がPMSに悩んでいる時期でミレーナを使用しようか迷っており、福岡の産婦人科を探してwebサイトを色々見ていました。けれど、メリットデメリット料金など仔細に記載したサイトがあまり無かった為、あれば良いのにという気持ちから作成しました。
レスポンシブ: PC
制作にかかった時間:topページに7時間位、その他のページ各2時間づつ。
ツール: PhotoshopCC / IllustratorCC
写真素材:PIXTA
アイコン素材:シルエットAC
参考サイト:https://whc.bayer.jp/mirena/
http://miyabi-lc.com/
http://www.nozakiwomens.com/
ペルソナシート
Tumblr media
カスタマージャーニーマップ
Tumblr media
テーマカラー
Tumblr media
気をつけた所
女性向けの落ち着いたデザインを意識して、見出しには明朝体を使用しました。本文はweb上で崩れないゴシック を使用しています。
コーディングの際にクラスを使い回せるように中面の見出しサイズや本文のレイアウトはなるべく統一しました。
0 notes
houwadesign · 6 years ago
Photo
Tumblr media
#バナーお題 vol.5でバナー作成してみました。
そもそも「#バナーお題」とは?
twitter上で こばやす📙独学Webデザイナー (@kobayas_s)さん がバナーのお題を出してくれて、そのお題に沿って各々がバナーを作って発表する企画です。
詳しくはコチラを。
今回のテーマ
スポーツクラブの入会推進キャンペーンバナーです。
Tumblr media
今回作成したバナー
作成時間:ラフに15分、デジタル作業に1時間弱。
作成ソフト:photoshop CC、Illustrator CC
写真素材は 写真AC より
今回使用した写真素材
Tumblr media
お題に躍動感のあるものとのことだったので、スポーツジムで髪がなびいている女性の写真をセレクトしました。
ラフ
Tumblr media
気をつけたポイント
1.レイアウト
躍動感が感じられるように新春キャンペーンのコピーは右肩上がりのナナメ配置。
2.フォントとジャンプ率
スポーツジムのバナーなので視認性重視でゴシックフォントをベースに使用しました。
「0円」が強調ポイントだと思ったので、ジャンプ率を高くして「0」の部分にオーバーレイ加工を。
3.爽やかさのある色使い
爽やかさのある色味をセレクトしました。冬から春かけて使えるものということで、新春を感じられるグリーンをメインカラーにしています。
初校
Tumblr media
今回現役デザイナーさんに初校を見ていただく機会があったので、アドバイスをいただいてカーニングや余白、フォントサイズを修正しま��た。
感想
今回修正のアドバイスいただいたことで、だいぶ改善された気がします。
デザインは人に見ていただくことでブラッシュアップされるといことを実感できました。
0 notes
houwadesign · 6 years ago
Photo
Tumblr media
#バナーお題 vol.4でバナー作成してみました。
そもそも「#バナーお題」とは?
twitter上で こばやす📙独学Webデザイナー (@kobayas_s)さん がバナーのお題を出してくれて、そのお題に沿って各々がバナーを作って発表する企画です。
詳しくはコチラを。
今回のテーマ
クリスマス商戦に向けた決済アプリ導入バナーです。
Tumblr media
今回作成したバナー
作成時間:ラフに20分、デジタル作業に40分。
作成ソフト:photoshop CC
写真素材は 写真AC より
イラスト素材は イラストAC より
今回使用した素材
Tumblr media
アプリ決済のバナーなので、QRコード記載のスマホ画像とクリスマス感のあるイラスト素材をセレクトしました。
ラフ
Tumblr media
気をつけたポイント
1.レイアウト
見易さを重視して情報がの重要度を精査してコピーを配置しました。
2.フォントとジャンプ率
アプリ決済のバナーなので、視認性の高いゴシック体を使用しました。
「200円プレゼント」が強調ポイントだと思ったので、200円の部分のジャンプ率を高くしてフォントカラーを前面に感じる赤に金で縁取りしています。
「クリスマスのお買い物に」の部分は吹き出しの様な感じにしたかったので手書き風フォントにしました。
3.クリスマス感のある色使い
クリスマス商戦様なのでクリスマスカラーの赤、緑、金を使用しています。
感想
ラフの段階で色味などほぼ決めていたのでデジタル作業がスムーズに進みました。
ラフの段階での落とし込みをもっと深めたいと思います。
0 notes
houwadesign · 6 years ago
Photo
Tumblr media
#バナーお題 vol.3でバナー作成してみました。
そもそも「#バナーお題」とは?
twitter上で こばやす📙独学Webデザイナー (@kobayas_s)さん がバナーのお題を出してくれて、そのお題に沿って各々がバナーを作って発表する企画です。
詳しくはコチラを。
今回のテーマ
遊園地開園記念を宣伝するバナーです。
Tumblr media
今回作成したバナー
作成時間:ラフに20分、デジタル作業に1時間30分。
作成ソフト:photoshop CC
写真素材は 写真AC より
フレーム素材は FramesDesign より
今回使用した写真素材
Tumblr media
楽しげなものに仕上がるようにカラフルな写真をセレクトしました。
遊園地のものと分かるように観覧車の素材を入れています。
期間的に冬のものなので冬服を着て遊具に乗っている子供の写真をセレクト。
ラフ
Tumblr media
気をつけたポイント
1.レイアウト
横長のバナーなのでキャッチコピーをメインにしたレイアウトにしました。
またメインのコピーは気分の上がる右肩上がりに。
2.フォントとジャンプ率
思わず楽しくなるような雰囲気になるように丸みのあるゴシックフォントをベースに使用しました。
「チケット20%OFF」が強調ポイントだと思ったので、ジャンプ率を高くしてフォントカラーを前面に感じる赤にしています。
キャッチコピーは賑やかになる様に3色使いに。
3.ポップな色使い
遊園地のターゲットを意識してカラフルに仕上げました。
感想
横長バナーなので視線誘導が難しいと思いました。
まだまだ改良余地があるかと思いますので、後日修正したものをあげるかもしれません。
情報整理が大事ですね。
0 notes
houwadesign · 6 years ago
Photo
Tumblr media
#バナーお題 vol.2でバナー作成してみました。
そもそも「#バナーお題」とは?
twitter上で こばやす📙独学Webデザイナー (@kobayas_s)さん がバナーのお題を出してくれて、そのお題に沿って各々がバナーを作って発表する企画です。
詳しくはコチラを。
今回のテーマ
温泉旅館3大特典アピールのバナーです。
Tumblr media
今回作成したバナー
作成時間:1時間30分。
作成ソフト:photoshop CC、  IIIustrator CC
写真、テクスチャ素材は 写真AC より
家紋マークは 家紋のCrestJapan  より
気をつけたポイント
1.レイアウト
メインビジュアルの配置割合は Vol.1 を作成した時と同じくバナーサイズに対してフィボナッチ数を割り出して配置。(*フィボナッチとデザインについてはコチラを参照)
3大特典は見易さを考えて並列配置にしています。
2.フォントとジャンプ率
高級感を感じられる様に温泉名と強調した���部分には明朝体を使用しました。
逆にその他の部分は視認性を意識してゴシック体にしています。
「WEB限定予約」が強調ポイントだと思ったので、和の雰囲気を意識して家紋マークを前面に感じられる赤色にしてその上に配置。
3.和の雰囲気
温泉旅館と言えば和の雰囲気と思い、落ち着いた色味を意識しました。
和紙のテクスチャや和の紋様を取り入れたり。
メインビジュアルに使っている霞紋様はイラレで作成しました。
感想
情報量が Vol.1よりも多かったので少し難しかったです!
実は最初に出来上がったものはコチラ
Tumblr media
フォントを全て明朝体にしていたので、他の方のデザインと見比べて少し視認性が低い様に感じました。
強調したい部分に強調色を入れた方が良いのかな?とも思い最終的に上げたものになりました。
可読性と視認性を意識してのフォントの使い分けは重要だと思ったお題でした。
0 notes
houwadesign · 6 years ago
Photo
Tumblr media
#バナーお題 vol.1でバナー作成してみました。
そもそも「#バナーお題」とは?
twitter上で こばやす📙独学Webデザイナー (@kobayas_s)さん がバナーのお題を出してくれて、そのお題に沿って各々がバナーを作って発表する企画です。
詳しくはコチラを。
今回のテーマ
一口チョコのバナーです。
😆ゆる募バナー課題 コンセプト👉冬限定一口チョコ。普段高いが今だけ割引価格 キャッチコピー👉ちょっと一息。贅沢をお裾分け 期間👉11/◯〜12/◯まで ターゲット👉20〜40代の働く男女 イメージカラー👉白、水色 バナーサイズ👉W300×H280px 誰でも参加OK!#バナーお題 を付けて投稿してね✨
今回作成したバナー
作成時間:隙間時間でトータル1時間程
作成ソフト:photoshop CC
写真、背景素材は 写真AC より
気をつけたポイント
1.レイアウト
メインビジュアルの配置割合はバナーサイズに対してフィボナッチ数を割り出して配置。(*フィボナッチとデザインについてはコチラを参照)
左サイドのコピーは並列配置にして見易さを意識。
2.フォントとジャンプ率
高級感を感じられる様に明朝体を使用しました。
「期間限定SALE」が強調ポイントだと思ったので、ジャンプ率を意識してフォントカラーをゴールドに近い色味にしています。
3.季節感
本文に「冬」というワードを入れなくても配色と画像で冬を感じられる様に意識しました。
感想
初めて挑みましたが、なかなか楽しかったです!
自分で仮想バナーを作成するよりこうやってお題があるとターゲットを明確に意識して作れるなと思いました。
0 notes