Webデザインノックをしようとしたら考察だけに終わった話

# はじめに
今回は、写真をピックアップして、簡単に並べるデザインをする
体当たりだー！体当たり！

# 写真映えしそうなお弁当を検索する
[pinterest（お弁当 おしゃれ）](https://www.pinterest.jp/search/pins/?q=%E3%81%8A%E5%BC%81%E5%BD%93%20%E3%81%8A%E3%81%97%E3%82%83%E3%82%8C&rs=guide&term_meta[]=%E3%81%8A%E5%BC%81%E5%BD%93%7Ctyped&add_refine=%E3%81%8A%E3%81%97%E3%82%83%E3%82%8C%7Cguide%7Cword%7C3)
さすがにすごい写真が並んでる。５個ぐらいでいいかなぁ
腹減ってくるな...
![image.png](https://qiita-image-store.s3.amazonaws.com/0/94562/f3565162-394e-41c4-46f8-872b8384e88b.png)
こんなもんかな
https://www.pinterest.jp/pin/741968107337833442/
https://www.pinterest.jp/pin/741968107337833300/
https://www.pinterest.jp/pin/741968107337832657/
https://www.pinterest.jp/pin/741968107337832782/
https://www.pinterest.jp/pin/741968107337832753/
![image.png](https://qiita-image-store.s3.amazonaws.com/0/94562/f5d2e360-08a3-6964-3e01-1e9033473933.png)

# 写真をトリミングする
バラバラだからな～、300の正方形かなー
これはDJでいうとミキサーのトリムでフェーダーMAX時の音量を揃えるってヤツだ（伝わってないぞ？
w564 x h564
w300 x h450
w564 x h564
w564 x h564
w333 x h500
![image.png](https://qiita-image-store.s3.amazonaws.com/0/94562/125fb751-be64-7c96-5b5b-9406c0d9425c.png)

# 簡単そうなデザインを検索する
全体はまあまぁマットに抑えた上で...写真を映えさせる、と。
https://www.pinterest.jp/pin/741968107337832383/
![image.png](https://qiita-image-store.s3.amazonaws.com/0/94562/3b703450-a6bf-1342-8cd8-a4e998d4ce7e.png)

# トップの画像はどうする？
Obentoコンサルティングにするか（思いつき）
これだっていうのを見つけて完コピするのがやっぱりいいらしいな。
なんかこういうのにしたい
![image.png](https://qiita-image-store.s3.amazonaws.com/0/94562/e233b918-8a6b-a95c-b23c-d4fde9ca8c77.png)

# タイトル候補
[コピーメカ](http://www.copymecha.com/index.php) を使おう
![image.png](https://qiita-image-store.s3.amazonaws.com/0/94562/92672dd4-d300-bb4a-996f-da31e50b2186.png)
日本をお弁当で元気にしたい
お弁当という名の自己表現　～自分自身を表現していると言えるほど好きになるのも大切かも～
自分を信じてお弁当を作ろう。 ～自分を信じろ、というだけではなく、信じられるようにしてあげましょう～
あなたが知らないお弁当の世界にご招待 Bento　～好奇心をくすぐれたらいいですね～
信じられるお弁当を、あなたに

# かるくスケッチをするか...
このいったんアナログでやるってのが結構抵抗感あったりもするんだけど、やっぱり一回パソコンを離れたほうがいいような気がする。下手くそな絵やろ？これくらいから始めてもいいんや。やる気と根気だよ根気。噛みつけ。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/94562/1cd78bde-cf0c-03ad-5912-062d8633b506.png)

# AdobeXD
スケッチの途中でAdobeXDを思い出す。今回はこれを使ってみよう
いままでに使ったデザインツールはなにが多いかって？**Excelだよ！**:rage:
仕様書とかドキュメントとかサ...
ってことで [Adobe XDまだ使ってないの？こんなに万能なのにもったいない！](https://liginc.co.jp/437151) を見てみましょう。
おう、なんかExcelとかPhotoshopみたいにできそう（Photoshopは基本加工はできる）。
チュートリアルをやってみると、、なんか Flash に似てるね！（Flash3~MXのあたりでよく使ってたことある）
図形でシンプルなマルを描いた場所に、Windowsフォルダから画像をドラッグアンドドロップすると丸く切り抜かれる！
これちょっとした感動だな。レイヤーもなにも気にしてない。手描きいらないかも
これExcelで図形作ってんのと変わらんわ:relaxed:
:point_down::point_down::point_down:
![image.png](https://qiita-image-store.s3.amazonaws.com/0/94562/04e36cbf-8a0d-8284-b849-de2290c8bab5.png)
![image.png](https://qiita-image-store.s3.amazonaws.com/0/94562/90be5b7f-0170-5b7d-4166-2aca92816ec4.png)

# 軽く配置してみた
なんかさー、、、この垢抜けない感じっての？なんなんだろうなぁ
お笑いもデザインも「間」が重要っていうよね。あとはなんだろう、ひとまずの改善点は背景かなぁ。明るく？
色の知識も仕入れないといけない気がしてきた。あとは素材同士の粒感というかレベル感...か？
っていうか、画像のサイズだわ。画像のほうが小さいもんね。なにが悪いのか思い当たるところが多すぎてまとまらない:thinking:
![image.png](https://qiita-image-store.s3.amazonaws.com/0/94562/dba50cfe-d397-0e36-d3b4-6abfa2d2403d.png)

# うーん...
サイズ比を変えたら少々ましにはなったんだけど、なんかさ...まてよ？
![image.png](https://qiita-image-store.s3.amazonaws.com/0/94562/566ec801-6b0f-9119-7bdc-1803dedbb75f.png)

# 国内デザインと海外デザイン
もしかして海外のデザインを選んだことが間違いなんじゃね？って思ったわけ。
で、検索してみたら、だいたい同じようなことが書いてある。
Yahooの国内と海外の比較で一発だよね。
[海外で好まれるWebサイトデザインの検証～文字が多い日本、シンプルなアメリカ～](https://citrusjapan.co.jp/column/cj-column/w006_201707.html)

うまい具合にかたちにならないもどかしさ。
日本語サイトのカタログを漁るしかないな...仕切り直しだ

デザインしてる人から ~~マサカリ~~ アドバイスこねーかなー
日記みたいになっちゃった:sweat_smile:
一応3連休がんばったんだよな...