こんにちは。Webディレクターのひよっこです。
お恥ずかしいことに、ITに関する知識だけでなく、社会人としての知識もまだまだ乏しく、専門書を読んでいてもまずそこに書かれている言葉の意味を理解できないということが多々あります。
先日も本を読んでいると「イニシャルコスト」「ランニングコスト」という言葉が出てきました。ランニングコストは分かります。「管理や運営のための維持費用」のことです。
しかし、イニシャルコストという言葉を初めて聞いたため、すぐに検索。「機材やシステムの導入に必要な初期費用」のことだそうです。
確かにinisialは日本語で頭文字のことを指しますから、よく考えると何となく想像が付きます。
こんな具合にちょっとした言葉にも引っかかってしまっていますが、その都度覚えていこうと思います。
こんにちは。Webディレクターのひよっこです。
メールやサイトでたまに目にする文字化け。今までは「文字化けしてるわ」程度に考えていたのですが、「なんで起こるの？」ということをきちんと知っておく必要があるのではと思い、調べてみました。
例えばメールの場合、代表的な文字化けの原因は「送信する側で設定した文字コードと受信する側で設定している文字コードが異なっているからなんだそうです。
例えると日本語の文章を無理やり中国語で読もうとするみたいな感じでしょうか。「確かにそれでは読めないよね。」と納得でした。
対処法としては、現在、日本語入力は「UTF-8」というコードを使っているため、必要に応じて設定を変更すれば良いそうです。
また文字化けの原因になりやすい環境依存文字は使わない方がいいとのことなので、注意してください。
Webディレクター備忘録ブログ、はじめます。
Webディレクター ＝ 何でも屋さん、でもありますが、全てを知っていないといけない、分野でもあります。
お医者さんも業務専門家が進んでいまして、例えば小児＝こども、の分野に限られた、心疾患＝心臓専門のお医者さん などというように都会の大学病院などでは専門の先生がいます。ただ、小さな町のお医者さんのように内科も外科もやっている先生もいます。どちらが素晴らしいではないのですが、お医者さんはそういったお仕事、という認識と同じように、Webディレクターと言われればWebに関わることは何でも知って対処できないといけない、と思います。
そんなWebディレクターのまだひよっこが少しずつ日々の備忘録代わりに記載していきます。
どうぞよろしくお願いします。
琵琶湖ほとりの不動産販売のキャッチコピー。新快速の長浜行きで1時間程度なので大阪からも近いので、「大阪から1時間」とした話。
結局それでは売れなかったけどキャッチを変えた売れたのですが、そのキャッチコピーは
「琵琶湖まで徒歩5分」
家族で住むには1時間とかあまりなんでもよくて、散歩に5分で琵琶湖ほとりを散歩できる場所、犬を散歩したり子供と散歩したり、そんな場所を探すご家族がイメージできます。
この仕事すればするほどこのユーザ目線と言うか求める人の感覚がずれます。ずれるから気をつけよう、とすることが常に大事ですし、取引先さんである不動産会社さんなんかはさらにずれます、なのでWEBディレクターが間をうまく翻訳するとか通訳するとかして伝わるように変換しないといけない、でないと存在価値がない、と思います。
セイロモータース南大阪さまサイトです。
メインビジュアルをかわいいクルマ設定 + #71CC63 透過 50％ です。
透過で白文字は最近多いです、文字箇所はテキストにしておけばレスポンシブでも対応しやすいので重宝してます。
スライド画像が多い場合もこれでいけば強みを多く出せます。覚えておきたいテクニックです。
大きいフリーペーパー『はじめての万博』
南森町駅3番出口でてすぐの西日本書店さんに大きなフリーペーパーがありました。POPでフリーペーパーですと書いてあるもののほんとに持ち帰っても良いのかドキドキしながら持ち帰りました。
大きさはA3で紙質が裏と表で違う！片面はつるつるしており、もう片面はざらざらした紙質ですごいフリーペーパーに出会ったと興奮しました。
インクを重ねていたり、きらきらしていたりとビジュアルだけですごく楽しめます。
内容は2025年の万博を知ることができるということで様々な面から万博について知ることができます。
BYTHREE inc.と株式会社人間が発行しているようです。サイトもあり、PDFで全ページ読めます。
が、これはぜひ紙面で見てほしいペーパーです。西日本書店さんにはまだありましたがほしい人はお早めに。
https://hajimete-expo.jp/
2018年10月15日に発表されたAiのアップデートが良い。
この中で驚いたのがグラデーションツール。フリーグラデーションという新しい機能にも驚きですが何よりも驚いたのがグラデーションパネルにスポイトツールがついたことです。
今までスポイトでカラーをとり、スウォッチにいれ、グラデーションパネルに持っていくという非常に面倒くさい作業でグラデーションが嫌いでしたが、これですごく楽に楽しく使えます！
非常にうれしいアップデートなので皆様ぜひアップデートしましょう。
イラレで文字の斜体を作る時はitalic体を使います。
しかし日本語にはitalicがない。どうしても日本語で斜体を使いたいときは変形パネルの右下にあるシアーを使用し作成します。
文字を選択しシアーで好きな数字を入力するだけ、この時一度使うとほかの変形時と違い数字が保持されず、0になってしまうので注意です。
日本語の斜体はあまりきれいに見えないため意図がなければ使わない方がいいでしょう。
前回は『選択範囲から作成』『スライスオプション』をショートカット登録し早くスライスすることを書きました。
今回はアセットを使ったスライスの仕方を書きます。
アセットはアセットパネルにオブジェクトをドラッグするだけでそのオブジェクトのアセットが作成されスライスよりも素早く画像書き出しができます。
複数のオブジェクトから作成されているものをアセットするには右クリック＞書き出し追加＞単一アセット または Altを押しながらアセットパネルにドラッグします。
アセットは変更を加えても自動で変更されます。
また書き出し形式jpg,png,svg,pdfが設定でき、スケール設定もできます。
非常に便利ですが、クリッピングマスクしたものをアセットに入れると余白まで書き出されてしまいます。そこはスライスで書き出した方がいいかもしれません。
イラレ上でPSで切り抜いた画像をリンク配置することは多いです。
しかしその切り抜いた画像の形に境界線をつけたいがアピアランスで線を増やしてもできない。
その場合切り抜いたデータをpsdで保存するのではなく、epsデータで保存すると切り抜きのパスが残っており、イラレでリンク配置してもそのパスに色をつけ線を太くし、画像を上にのせるとイラレ上で境界線上ができます。
まず普通に切り抜きます。
パスがある状態でepsで保存します。
イラレ上で開きます。1つはそのままもう1つコピーし、グループ化しているので解除、パスだけのこします。
パスを任意の太さにし、もう1つの画像を重ねると完成です。
最後にイラレ上でできますが、PSで境界線つけて保存したほうが早いです。
FWで選択したスライスだけを書き出したい。
Webレイヤーを選択しファイル＞書き出し で書き出しのパネルをだし、選択したスライスだけを選択し保存。
これで書き出せるはずだが何度やってもかきだした画像がない。保存を押しているのだが画像は書き出せていない。
解決法を探してみると、ページをすべてのページだと書き出せないという情報を得た。
そこで現在のページに変更したが状況は変わらなかった。
そこでいろいろ試し、選択中のwebレイヤーを重ね順の一番上にしたところ、書き出すことができた。
なぜ成功したのかわからないがもし同じ症状に陥った際は試してみたほしい。
サイトカンプをAiで作成しスライスする場合、
オブジェクトを選択しメニューバーのオブジェクト＞スライス＞選択範囲から作成でスライスし、
オブジェクト＞スライス＞スライスオプションでスライスオプションパネルを出しスライスの名前を設定します。
サイトカンプだと多くのスライスを作成しますが、ショートカットキーがないため、いちいちメニューバーから上記の行動をとらなくてはなりません。
かなり面倒で時間がかかってしまいますのでショートカット登録します。
ショートカット登録の仕方
1.メニューバーより編集＞キーボードショートカットを選択。
まずは保存し、カスタマイズしていきます。
上から2番目のツールをメニューコマンドに変え、オブジェクトの中にある選択範囲から作成とスライスオプションを好きなショートカットキーで登録します。
この時すでに初期設定で登録しているものにしてしまうと書きかわってしまうので気を付けてください。
絶対使わないショートカットもしくは使われていないもので覚えやすいものを設定しましょう。私は選択範囲から作成をCtrl+w、スライスオプションをCtrl+Shift+wにしました。
オブジェクトの位置とは選択しているオブジェクトをレイヤーでパネルでハイライト表示する機能です。
サイトカンプ等を制作するとレイヤーの数が膨大になり今選択しているオブジェクトがどこかわからなくなることが多くあります。
また違う人が作成したデータを編集する場面では特にどこかわからなく無駄な時間を使ってしまいます。
レイヤーパネルの一番下にある、左から2番目の虫眼鏡アイコンが「オブジェクトの位置」アイコンです。
使い方はとても簡単でオブジェクトを選択し、この「オブジェクトの位置」アイコンをクリックするだけ。
そうすると赤線で囲ったようにハイライト表示しすぐにわかります。
知らないだけでショートカットできるのに無駄な時間を使っていることは多くありそうです。効率的に作業できるように覚えておきたいですね。
行間について。
一般的に行間があいていると大人っぽく高級感があります。
しかし文字量が多くページがあまり長くなりすぎてもいけないと考えたとき、文字のサイズを小さく、小さくできないときは行間、字間を詰めることがあります。
今日は収めるためについつい狭くしてしまい、読みづらいデザインをつくってしまいました。
そんな時、目安として「文字の大きさの135％以下にはしない」と教わりました。
実際にやってみると確かに135%以下だと読みづらいですね。
しっかり学んでUIに優れたデザインを作成します。
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個までしか覚えられない。
つまりwebページをつくる際グローバルナビやサブメニュー等に7個以上続けると認識してくれなくなるので、減らすか区切りをつけないといけません。
言われてみるとwebページを見ていても7個以上のグローバルナビはあまり見かけませんね。グローバルナビに関しては多くても6個まででないとUIが悪いようです。
試しに7項目あるグローバルナビを作ってみましたが違和感があり、文字が全然入ってこないです。
webを作成する際はマーケティングや心理学の知識に基づき作成しなければならないですね。
Webページ作成するときにシェイプは非常によく使いますが、線は内側に設定しないといけません。
初期設定だと線は真ん中になっています。このままだと任意の大きさに作成しても線の太さ分大きくなりデザインが崩壊してしまいます。
なのでいつも内側にしていますがあるとき線の位置を設定できないシェイプがありました。
何をしても選択できないのですが、原因はフォトショップデータをイラレ上で開いたものだったからでした。
フォトショップデータをイラレ上で何とか編集できるデータを保ち開けるときがあってもやはりうまく編集できないデータになっていることも多いです。
新たにイラレでシェイプを作成するのが一番早い解決法です。違うデータのものを開いたりコピーするときは気を付けましょう。
とりよねさんhttp://www.toriyone.com/
で毎年開催されているお座敷体験に行ってきました。
おいしい懐石料理をいただき、舞妓さん芸子さんの舞が始まります。
しなやかで女性らしい動きでとくに袂で口を覆う仕草には何とも言えない奥ゆかしさを感じます。１つ１つの動きが絵になりまるで日本画を眺めているようでした。
舞が終わると、テーブルに訪れお話ができます。その時に着物について尋ねると夏と秋の間なのでその間に咲く花の柄だったり、季節感を大事にしているとおっしゃってました。
舞妓さん。帯留めが鳥で一番良いものをつけさせていただいてると話していただいた。
鮮やかな青と白い肌赤い化粧がとても綺麗でした。
良い体験でした。
ジャンプ率とは文字に大きさの差を与えたことです。
Webやチラシなどでよく見ると思います。例えば、特売品の数字を大きく、円や税込などは小さくすることで一番見せたい情報を瞬時に理解させます。
Webページはスクロールさせるのですべての文字を読ませるためではなく読み飛ばしても理解できるようによくジャンプ率を使用します。
ジャンプ率は文字の大きさの差が大きい程ジャンプ率が高いと言い、若者向けで動きがでるが少し安っぽく感じる、差が小さいのを低いと言い、大人っぽく、高級に見えます。
webページのジャンプ率の平均は 【本文】：【中見出し】：【大見出し】 1：1.8：3.5 らしいです。
気持ちよく読めるようにこの平均にのっとりながら考えてみようかと思います。
リボンをつくる。
長方形のシェイプの真ん中にポイント追加し、リボンの切り込みをいれる。
1pxのシェイプを2本作りパスファインダーで切り抜く。
効果＞ワープ＞旗 を選択するとなびく。
簡単にリボンが作成できる。
ここにパス上文字で書けばバナーに使えます。