見出し画像

妄想ウェブサイト#6 モモの世界

ナツデザインではデザインのサンプルとして、様々な架空の企業やサービスのWebサイトを制作・公開しています。「妄想ウェブサイト」シリーズと題して、1本ずつどんな妄想(設定)から生まれたサイトなのか、制作のこだわりポイントなどご紹介していきたいと思います。
第6回目は、イラストレーター・桃井ひつじさん(架空の人物です!)のブログサイトです。

サイトURL→https://natsudesign.main.jp/momoihitsuji/

ブログトップ
記事本文


今回のサイトの設定

妄想ウェブサイトシリーズも本日で6本目。
これまでに制作してきたものと何か雰囲気が違うものを入れたいと考え、「甘くかわいらしい中にも独特の世界観が魅力のイラストレーター、桃井ひつじ」というキャラクターを設定してブログサイトを制作しました。

桃井さんの世界観を全面に押し出すよう、細かいボタンの端まで余す所なくフリフリ・ラブリーに仕上げています。
お時間のある方は、実際のサイトにて現寸大でご覧いただけると嬉しいです↓
https://natsudesign.main.jp/momoihitsuji/

——————————————————

ひとつ前のnoteで久しぶりに映画を観たいと書いた通り、レンタルで「グランド・ブダペスト・ホテル」を観ました。
今回のサイトの配色はこの作品のキーアイテムとなる、洋菓子店メンドルの箱から着想を得て制作しています。

あらすじでは「かつて栄華を極めたヨーロッパ最高のホテルの “伝説のコンシェルジュ”が連続殺人事件に挑む豪華スター競演のミステリー・コメディ!」と紹介されていましたが、個人的には戦争映画であると感じました。
絵本のような構図、ホテルのテーマカラーであるピンクをはじめとした華やかな色合いの甘い画面でも、だんだんと隠しきれなくなってくる戦争の影…なんとも言えない気持ちになります。
画面の甘さとストーリーのビターさのバランスが、チョコレートケーキのように中毒性のある一作です。

1回目は伝説のコンシェルジュvs連続殺人事件のサスペンスものとして、そして2回目は戦争前後の不安定な世の中を、その中でも幸せを見つけながら懸命に生きた人々の物語として、まだご覧になっていない方は是非観てみてください。


デザインのポイント

トップ画像は日記帳の表紙のイメージで制作しました。タイトル周りの装飾には、イラスト制作に使う画材が3種類隠れています。すべて見つけられるでしょうか~?

答えです!上部の羽根のような部分は羽ボウキ、両サイドの白い花はよく見ると万年筆のペン先に、下部の実がなった植物は実の一粒ずつが絵の具のチューブになっています。

イラストレーターさんのブログサイトということは、作品画像が記事のサムネイルになることも多いはず。ブログ記事一覧ではサムネイルを額装して美術館のように並べてみました。今は見本の画像1種類をひたすら並べる形になっていますが、実際に色々な作品が入ると、まさしく「展示」という感じで迫力が出そうです。

桃井さんのプロフィール写真は、昔の青写真のイメージで青の濃淡に調整しました。Photoshopのダブルトーン機能で、この単色のモノクロ表現(正しくはなんて言うんでしょう…?)が簡単に作れます。

作り方は以下の通りです。
①ダブルトーンを使う前に、グレースケールで画像の色を全て抜きます。

②グレースケールをかけたらダブルトーンをかけます。

③下のウィンドウが出たら赤枠の部分をクリックします。

④カラーピッカーが出てくるので、塗りたい色を選びます。

⑤完成です。

今回は全体を通して、印刷物のような表現を意識して制作しました。
Webサイトというデジタル媒体に、あえてアナログらしい表現を使うことで面白い仕上がりになったのではないかと思います。
次回もお楽しみに!



この記事が参加している募集

つくってみた