Toyo Kibun*
新米Web屋の雑記帳(只今デザイン調整中につき、お見苦しくて申し訳ありません)
電車とバスの乗車券(バスは乗り放題)＋選べるごはん券＋選べるごほうび券(お土産、アクティビティ等)がワンセットになっていて非常にお得です。
提携しているお店や施設から選ぶシステムなのですが、私は知らない土地へ1人で出かけるのがあまり得意ではないので、選択肢が限られていることが返って楽でした。
オランジュ・ブルー&一色海岸
ランチは選べるごはん券を使って、オランジュ・ブルーでハンバーグをいただきました。
神奈川県立近代美術館に併設のレストランです。
美術館は休館日だったのですが、なぜかレストランだけ営業していました。
ハンバーグはふわふわとした食感がおいしかったです。
ガラス越しに美術館の庭園や海を一望できるので、癒されます。
食後は近くの一色海岸を散策。
シーズンオフの海岸は人が少ないので、のんびりできます。
AMIGO MARKET & CINEMA AMIGO
選べるごほうび券はおいしそうな食べ物系のお土産が豊富なのですが、夫は仕事が多忙で家にあまりいない時期だったので、食べ物は断念しました。今回はCINEMA AMIGOというシネマカフェで映画を観てきました。
映画館、自宅以外の場所で映画を観る機会はなかなか無いので、貴重な経験でした。
CINEMA AMIGOの隣のAMIGO MARKETというカフェで上映開始時間を待ちました。
抹茶のムースが上品な味でした。
CINEMA AMIGOはレトロで素敵な場所でした。
「神々の山嶺」という作品を観ました。
山岳映画なのですが、ヒューマンドラマとしても面白い作品だったので、登山の知識が皆無でも楽しめました。
足を踏み外した登場人物の安否がはっきりするまで長い時間を要したり、手に汗握るシーンが多く、山岳映画はある意味ホラー映画などよりも心の負荷が大きいかも知れません。
注文したビールがぬるくなっていることを忘れるほど没頭しました。
今回行った場所以外にも気になる場所が沢山あるので、また利用してみたいと思います。
お勧めサイト
お勧めアイテム
プライベート用の手帳とは別に仕事用の手帳も使っています。
基本的に仕事のことしか書いていないので、持ち歩いてはいません。
毎年方眼のフォーマットのものを購入しているのですが、方眼を塗りつぶすことでその日何にどのぐらいの時間を使ったかが分かりやすくなります。
この方法で時間の家計簿のような記録を残すのが仕事用の手帳の主な使い道です。
これをやっておくと工数実績の報告などが楽になります。
他には、仕事で関わりがある人の休暇予定、ミーティングの時に使うカンペ的なメモなども紙ベースで管理しています。
来年用にはジブン手帳DAYS miniを購入しました。
持ち歩く訳ではないので通常サイズ(A5スリム)と迷ったのですが、まずはminiを使ってみて物足りなかった場合は通常サイズに乗り換えるかもしれません。
マンスリーページ
下の方にガントチャート的な欄があるのが最大の特徴です。
私は仕事専用手帳として使うので、毎日やらなくてはいけないルーチン的な作業のチェックリストか、プロジェクト管理に使うことになると思います。
その分カレンダー部分が狭くなってしまうのですが、マンスリーページではそれほど細かいスケジュール管理をしないので、問題ありません。
デイリーページ
前述の時間の家計簿はこのページを使って記録します。
1日1ページなので、これだけのスペースがあれば私が手帳で管理したいことは一通り書けそうです。
過去にほぼ日手帳を使っていたので1日1ページの手帳自体は初めてではないのですが、中央に時間軸があるフォーマットは初めてなので使うのが楽しみです。
来年の手帳は、過去に使ったことがある手帳のリピではなく、これまで使ったことのない手帳を使ってみようと思っていました。
単純に文房具好きとしていろいろな商品を試してみたいというのもあるのですが、理由はもう1つあります。
来年の手帳を決めるために候補の商品のサイトを見ていた際に、「この商品はそうそう無くなったりしないだろう」と思っていた定番商品のいくつかが生産終了になったり大幅な変更があったりすることを知りました。
いつも同じ手帳じゃないと生きていけない体になってしまったら、自分の愛用品が無くなったときの喪失感に耐えられるかどうか…。
1つの商品を大切に使い続けるのも良いけれど、臨機応変にその時手に入る商品を使いこなすことも時には必要だと思いました。
とはいっても、
サイズはB6～A5スリム
マンスリーページは6週表示に対応している
ウィークリーページはバーチカルで30分刻み
メモページが多め
などなど、手帳に求める条件が多い方だと思うので、使える手帳は限られてくるのですが…。
その結果選んだのがミドリの日の長さを感じる手帳です。
飽きの来ないグレーの表紙、可愛くて華やかだけどキャラクターもののような子供っぽさは感じられないところなどが気に入りました。
マンスリーページ
少し紫がかったブルーの罫線が印象的です。
マンスリーページに満月と新月だけが印刷されている手帳は多いですが、この手帳はすべての日に月の満ち欠けが印刷されているのが特徴的です。
ウィークリーページ
この手帳の最大の特徴はこのウィークリーページだと思います。
日が昇っている時間は白、沈んでいる時間はブルー、日の出・日の入りの時間はピンクというグラデーションで表現されています。
そのため、4月のページと12月のページを比べてみるとページの色のバランスが大分違います。
24時間バーチカルなので、育児の記録を残したい方や早朝や深夜に仕事や用事がある方にも便利そうです。
お勧めアイテム
簡単に美しい配色を提案してくれるカラーツールは、非常に便利ですが「最近は種類が多すぎてどのツールを使えばよいか迷ってしまう」という方も多いのではないかと思います。
そういう方に少しでも参考になるかもしれないので、私が良く使う3つのカラーツールと、それぞれのツールをどんな風に使っているかをご紹介したいと思います。
この3つがあれば大抵のケースに対応できるので、3つともお勧めです
ColorSpace
ColorSpace - Color Palettes Generator and Color Gradient Tool
配色を決めるときに私が真っ先に使うのはこのツールです。
カラーコードを1つ入力して「GENERATE」ボタンを押すだけで色々な配色を提案してくれます。
私はサイトやバナーのキーカラーを1色決めてこのツールを参考に他の色を決めるというのが定番です。
例えば、↑これは対照的だけどバンランスが取れた配色です。
↑こういった感じの規則的な配色も提案してくれます。
他にも1つのキーカラーからいろいろな配色を提案してくれるので用途に合った配色を見つけられます。
Paletton
Paletton - The Color Scheme Designer
他のブログでもカラーツールの紹介記事ではほぼ出てくるのではないかというぐらい有名なツールです。
こんな風に色相違いで明度や彩度が同じぐらいの配色が抽出されるので、Webメディアなどでカテゴリーごとに色分けしたいときなどに便利です。
0to255
文字の可読性などの関係で、ColorSpaceやPalettonで出てきたカラーコードよりも明るめor暗めの色が欲しいときなどにこのツールを使っています。
こんな風に色相をずらさずに濃淡だけが違う色が出てきます。
カラーコードをクリックするとクリップボードにコピーされるのも便利です。
お勧めアイテム
サイトトレースの第5弾はSK wordという名古屋の企業のLPです。
暖色系だけど甘すぎないデザインが素敵です。
サイトで使われているカラー
#ffffff #000000#e34394 #ffff00 #f6f7fb #bfbfbf
私がこれまでにトレースしたサイトの中では色数が少ないです。
限られた色を繰り返し使うことで一貫性が維持されているのかもしれません。
気付いたこと
同じ色の不透明度違いを使い分けている
濃いピンク(#e34394)が沢山使われているのですが、イラストに添えられた文字や、飾りの数字などは、同じ色の半透明が使われています。
また、10%、25%、50%など様々な濃さが使い分けられています。
同じ色を繰り返し使っていてものっぺりとした印象にならず、効果的だと思いました。
程よい頻度で明朝体が使われている
明朝体のサイトは女性向けのエレガントなサイトや、クラシックな雰囲気のサイトでよく使われるのですが、どちらにも該当しないサイトで明朝体が使われているのが珍しいと思いました。
見出しやキャッチコピーなど本当に目立たせたいところに絞って使えば、こういった雰囲気のサイトで明朝体を使うのも有りなんですね。
装飾目的の文字は思い切ったフォントサイズが指定されている
イラストに添えられた「Hello!」や「Ciao!」の文字は150px、「フルリモートでも完全対応」のバックグラウンドの「Telework」の文字は190pxです。
見出しなどユーザーに読んでもらいたい文字だったら明らかに大きすぎなフォントサイズなのですが、飾りつけのための文字がこのぐらい大きい文字だと挿絵のような効果が感じられます。
明けましておめでとうございます
去年は多くの人にとっていつもと違う1年だったと思います。
もちろん、私も例外ではありません。
テレワークや飲食店のテイクアウトなど、コロナがきっかけで今までに無い経験が出来ましたが、コロナで得られたメリットの中にみんなの健康や生命よりも大切ななものは1つもありません。
まだ不安が尽きない日々ですが、コロナによる被害を最小限に抑えられること、去年できなかったことが沢山出来る日が1日も早く来ることを願って止みません。
お勧めアイテム
「冬の茨城で鮟鱇を食べる」という、その気になればいつでもできるけれど、その気にならないといつまでもできないレベル感の夢を実現しました。
今回訪れたのは二ツ島観光ホテルです。
客室でのんびり
今回の旅行では感染予防のためにも、観光はせずにほとんどの時間を客室で過ごしました。
部屋からの眺めです。
2時間ドラマのような風景が間近で見えます。
アクセサリー入れに可愛い巾着を用意してくれました。
あれば便利だけど忘れがちなものなので、有難いです。
夕食の時間まで売店で購入したお酒で部屋飲み。
鮟鱇づくしの夕食
まずは鮟鱇料理を1口ずつ色々と。
今回の1番のお目当てどぶ汁です。
私は初めて知った料理なのですが、水を使わずに野菜や鮟鱇の水分だけで作る鍋なので、とっても濃厚です。
どこから食べてもあん肝の味がします。
新鮮な鮟鱇じゃないと成立しない料理のため、食べられるところが限られているそうです。
他にも鮟鱇の一品料理が続々と出てきます。
煮た鮟鱇、焼いた鮟鱇、蒸した鮟鱇……。
色々な鮟鱇が楽しめます。
デザートは紅まどんなと苺でした。
ザ・旅館の朝食
夕食やお風呂だけでなく、自分じゃとても用意できない豪華な朝食も、旅行の大きな楽しみです。
大きな鯵の開きに海鮮のしゃぶしゃぶ、烏賊そうめんなど、魚を満喫できます。
茨城に来たら絶対に食べたい納豆ももちろんついてます。
お勧めサイト
お勧めアイテム
久々のサイトトレースは、
第一園芸です。大手のお花屋さんのサイトなだけあって、ただぼんやりと眺めているだけで幸せな気持ちになれます。
サイトで使われているカラー
#cccccc #e5e5e5 #efefef
#666666 #6a6a6a #888888
#000000 #111111 #222222 #444444
#6e886d #93a892
エレガントな雰囲気のサイトにはよくあることですが、ものすごい数のグレーが使われています。有彩色はごく僅かにも関わらず、このサイトの第一印象はモノトーンではなく落ち着いたグリーンを感じました。
写真の雰囲気がサイト全体に影響しているせいでしょうか。
気付いたこと
控えめな色で目立たせる
最近、トップページにコロナ関連の重要なお知らせを配置しているサイトをよく見かけます。
こういう場合、サイトのイメージに関係なく赤が使われていることが多いのですが、このサイトではサイトのイメージ通りの色が使われています。
「真っ先に視界に入る位置に配置する」「ほかの部分と前景色と背景色を逆にする」など、色を派手にする以外の目立たせ方を考える上で、参考になります。
下層ページも可愛い
トップページ以外のページには、2カラムの左と右の境目に、綺麗な植物の写真が細く配置されています。
これは2カラムのサイトを作る機会があったら真似したい！
また、ページによって違う画像が使われているので、思わず他のページも見たくなります。
WEBデザイナー辞典というサイトで配布されているデザインの課題に挑戦してみました。
今回デザインしたのは架空のウィッグ専門の美容院のサイトです。
この美容院のリニューアルをしてあげてください。ターゲット層は10代から30代の女性です。音声ブラウザ対策やSEO対策は一切必要ないそうです、あくまでもスタイリッシュでセンス重視のイメージ重視サイトを希望しています。イメージカラーはお任せとの事です。（サイトページ数5P/難易度：中）
作ったデザインはこんな感じです。 ※別ウィンドウで大きい画像が表示さます
想定したターゲット
課題では「10代～30代の女性」がターゲットということでしたが、ウィッグ専門なので30代にウェイトを置いても良いのではないかと思いました。
斬新な美容院なので、お洒落をするときにはモテることよりも流行や同性の評価を優先するタイプの方に好まれそうなデザインを目指しました。
工夫した点
外国人モデルの写真を多用
普段は、ユーザーがその商品やサービスを利用しているところを思い描きやすいように、人物の写真を使うときは極力日本人orアジア人のモデルの写真を使うようにしていますが、今回はスタッフ紹介の部分以外は外国人モデルの写真を使いました。
理由としては、今回想定したターゲット層はshu uemuraのように日本の企業が外国人モデルを起用するというのに抵抗を感じない方が多いと思ったためです。
アイコンやイラストを使わない
お問い合わせボタンなど重要な部分にはアイコンを添えたくなるのですが、それだとスタイリッシュさが損なわれてしまうので、目立たせたい部分はフォントのサイズや余白の大きさで表現しました。
1ページにまとめる
課題では5ページ作ることになっていたのですが、最近はこのぐらいの情報量なら1ページで完結しているサイトが多いので、LPのように1ページにしました。
#001、#002とエレガントな印象のサイトが続いたので、今回は違った雰囲気のサイトをトレースしてみようと思い、モチベーションプラスのサイトをトレースしてみました。
カラフルなグラデーションが印象的なサイトです。
サイトで使われているカラー
#e6001e
#0086d1
#d25089
#00092e
#ffffff
#f8f8f8
#f6f6f6
#f4f4f4
#f2f2f2
#f0f0f0
#e7e7e7
#e6e6e6
#808080
#7e7e7e
#333333
#000000
ものすごい数のグレーが使われていたのでびっくりしました(＠_＠;)
それに対して有彩色は最小限に絞られています。
気付いたこと
グラデーションが実は3色
至る所に赤(#e6001e)～青(#0086d1)の鮮やかなグラデーションが使われています。
このグラデーション、一見2色だけのグラデーションが使われているように見えますが、実は赤と青の間に明るい赤紫(#d25089)が挟まれています。
細かいようですが、この赤紫の有無でグラデーションの印象がだいぶ違います。
グラデーションが2色の場合
2色だと赤と青の境目が暗くて濁った印象です。
グラデーションが3色の場合
真ん中を赤紫にすると全体が明るく鮮やかな仕上がりです。
コンバージョンボタンの目立たせ方
コンバージョンボタンはどのサイトでも目立たせていますが、文字を大きくする、ほかの部分より派手な色を使うなど、目立たせ方は千差万別です。
このサイトではがばっと大胆に余白を空けて目立たせています。
また、文字やアイコンの位置関係もきれいです。
お勧めサイト
- PROFILE
-
横浜在住の新米Web屋。
30代未経験でWeb業界に足を踏み入れた為、日々勉強中。
横浜&京浜東北線沿線に良く出没しています。
- RANKING
- GROUP SITES
- 趣味兼勉強の為、色々とサイトを作っています。