Webpとは

WebP(ウェッピー)は、米Googleが開発しているオープンな静止画フォーマット。ファイルの拡張子は「.webp」。
2010年9月30日に仕様が公表され、各種ツールと共に提供が開始された。
ウェブサイトのトラフィック量軽減と表示速度短縮を目的としており、インターネットのWebページで広く使われている非可逆圧縮のJPEGや可逆圧縮のGIF、PNGの置き換えを意図する規格である。JPEGとは異なり、非可逆圧縮でもアルファチャンネルを扱える。ただし、競合各社の思惑もあってブラウザでの採用が進んでいないため、ウエブサイトでも採用が進んでいない。
(Wikipediaより引用)

つまりgoogleが作ったwebサイトのための拡張子でJPEGの代わりにPNGよりも軽く透明化をもってるデータ。
プラグインを入れればPsから書き出せるそうですがWebPをAiではそのまま使えないです。

一番簡単な方法はhttps://convertio.co/ja/ファイルコンバーター。オンラインでjpg 、png等に変換していつも通り扱うことです。

今はまだあまり見ませんがこれから普及するかもしれませんね。

マジカルナンバー7±2

マジカルナンバー7±2とは心理学で人間が覚えられるのは7つまでという法則のことです。

プラスマイナス2まで差はあるが、平均で7個までしか覚えられない。

つまりwebページをつくる際グローバルナビやサブメニュー等に7個以上続けると認識してくれなくなるので、減らすか区切りをつけないといけません。
言われてみるとwebページを見ていても7個以上のグローバルナビはあまり見かけませんね。グローバルナビに関しては多くても6個まででないとUIが悪いようです。

試しに7項目あるグローバルナビを作ってみましたが違和感があり、文字が全然入ってこないです。

webを作成する際はマーケティングや心理学の知識に基づき作成しなければならないですね。

Aiでシェイプの線が内側にできない

Webページ作成するときにシェイプは非常によく使いますが、線は内側に設定しないといけません。
初期設定だと線は真ん中になっています。このままだと任意の大きさに作成しても線の太さ分大きくなりデザインが崩壊してしまいます。
なのでいつも内側にしていますがあるとき線の位置を設定できないシェイプがありました。

何をしても選択できないのですが、原因はフォトショップデータをイラレ上で開いたものだったからでした。
フォトショップデータをイラレ上で何とか編集できるデータを保ち開けるときがあってもやはりうまく編集できないデータになっていることも多いです。

新たにイラレでシェイプを作成するのが一番早い解決法です。違うデータのものを開いたりコピーするときは気を付けましょう。

お座敷体験

とりよねさんhttp://www.toriyone.com/
で毎年開催されているお座敷体験に行ってきました。


おいしい懐石料理をいただき、舞妓さん芸子さんの舞が始まります。
しなやかで女性らしい動きでとくに袂で口を覆う仕草には何とも言えない奥ゆかしさを感じます。1つ1つの動きが絵になりまるで日本画を眺めているようでした。

舞が終わると、テーブルに訪れお話ができます。その時に着物について尋ねると夏と秋の間なのでその間に咲く花の柄だったり、季節感を大事にしているとおっしゃってました。

舞妓さん。帯留めが鳥で一番良いものをつけさせていただいてると話していただいた。

鮮やかな青と白い肌赤い化粧がとても綺麗でした。
良い体験でした。

ジャンプ率

ジャンプ率とは文字に大きさの差を与えたことです。

Webやチラシなどでよく見ると思います。例えば、特売品の数字を大きく、円や税込などは小さくすることで一番見せたい情報を瞬時に理解させます。

Webページはスクロールさせるのですべての文字を読ませるためではなく読み飛ばしても理解できるようによくジャンプ率を使用します。
ジャンプ率は文字の大きさの差が大きい程ジャンプ率が高いと言い、若者向けで動きがでるが少し安っぽく感じる、差が小さいのを低いと言い、大人っぽく、高級に見えます。

webページのジャンプ率の平均は 【本文】:【中見出し】:【大見出し】 1:1.8:3.5 らしいです。

気持ちよく読めるようにこの平均にのっとりながら考えてみようかと思います。

なびいたリボン

リボンをつくる。

長方形のシェイプの真ん中にポイント追加し、リボンの切り込みをいれる。

1pxのシェイプを2本作りパスファインダーで切り抜く。

効果>ワープ>旗 を選択するとなびく。

簡単にリボンが作成できる。

ここにパス上文字で書けばバナーに使えます。

ブレンドツールで放射線上の線を作成する

ブレンドツールと効果の円弧を用いて放射線上の線を作成します。集中線や目立たせたいときに便利です。

ブレンドツールは2つ以上のオブジェクトの間に、均等間隔にオブジェクトを作成できます。

まずほしい幅の両端に線を2本作成します。

この2本のそれぞれのポイントを選択したら。等間隔の線が生まれます。

ブレンドツールアイコンをダブルクリックすると編集パネルが出現し間隔など変更できます。

次に上のメニューにある、効果>ワープ>円弧をクリックします。

ワープパネルオプションがでてくるのですきなカーブに編集したら出来上がりです。

ページ内に遷移するボタンについて

webページで欠かせないのがボタン。

ショッピングサイトのカートに入れるボタンに関しては押しやすさ、ほしいときに押せる位置にないと顧客を逃してしまうので非常に重要です。

今回はページ内の下に遷移するボタンを作成しました。その時このような失敗をしました。

1番上は、下矢印だけでは上の文字スペースに比べて余白が多く違和感がある。

真ん中は、2つに分けたが上と下の比率が中途半端で違和感がある。

真ん中がOKのでたボタン。あまり違和感がないと思います。

webページにおいて違和感がなく見せれるのが大事ですね。(意図した場合は別)

パターンの色を変える。

パターンの色を変える。

スウォッチからすきなパターンを適用する。

編集>カラーを編集>オブジェクトを再配色

パネルが出てくる
プリセット カスタムの右アイコンを押すと、配色オプションパネルがでる。

保持のブラックのチェックを外す。

好きな色を押したら色が変わる。

ハローキティ新幹線

本日はハローキティ新幹線に乗車しました。初めてラッピング新幹線に乗車したのですが、車内のあちこちにキティの気配を感じました。

車内ドアもキティのシンボルであるリボンが描かれていました。


このリボンがあるだけでキティと思い描く人も多いのではないでしょうか。非常にシンプルで子供も真似して描くことができる。シンプルでありながら個性があるとても良いデザインです。

こちらはシンボルがなくフォントだけなのですがサンリオ感が伝わります。

白文字に優しいピンクでふちどり、角がなく丸いフォント。
フォントの種類はもちろん、太さ、字間でも与える印象は全然違います。
デザイナーとして未熟な分世にでている一流のデザイン、製品を多く見てみてもっともっと学び考えなければなりません。

きちんと理論をもったデザインを心がけなければならないなと感じる一日でした。