Adobe XDでぱんくずをつくるベストプラクティス
Adobe XDでぱんくずリストをつくる時、文字数が増えても減っても困らないコンポーネントにしたい。そんな時は、「スタック」機能の出番だ。
スクショを参考に、「横向き」に均等なマージンをつける。
テキストは、「横幅自動調性」にすると入力時自動で伸びてくれて便利。
ボタンにホバーステートをつけた上でボタンテキストを変更する方法【Adobe XD】
ボタンにしたコンポーネントにホバーステートを追加できるようになりしばらく経ちますが、うっかりすると、ボタン内テキストがhover時に元に戻ってしまいますよね。
これを避けるのは簡単ですが、忘れがちなのでメモっておきます。
コツとしては、ボタンコンポーネント自体にhoverをつけないこと。
コンポーネントは入れ子にします。
背景のボタンのシェイプを、別のコンポーネントにします。
こちらにホバーステートを追加して完了です。
ロリポップで無理やりmySQLバージョンアップした記録
いやはやこりゃ大変だ。
突然現れたWordpressヘルスチェック。なにがヘルスだ。新型コロナウイルスに怯えながら、Wordpressの健康を気遣わなければならないなんて…！
しかし籠城で少し暇なのでものはついでとやってみた。
手順は色々ぐぐって以下、割と最短距離かと。
まずロリポップからphpAdminに入ってエクスポート。詳細を選択。
ダウンロードフォルダとかに入ると思う。
これはいじらなくて大丈夫。
ちょっと怖いけどロリポップ管理画面＞データベースから、データベースを削除する。これでWordpressは真っ白になるはず。真っ白？エラー画面かもしれんが。。
即座に新規データベースを作成し、最新バージョンにする。
またphpAdminに入りなおす。（前のと違うので注意。新規作成されている）
この時、パスワードとかはあんまり変えないほうがいいと思うんだけどロリポップの「サーバ名」っていうのを正確にコピペする必要がある。
他の設定は変えなくても、ここはどうしても変わるためだ。
次は「インポート」でさっきエクスポートしたばっかのdbをインポートする。
この時、特に設定は必要ないらしい。
左カラムから、ひとつしかないdbを選択していないと「どこにインポートすんねん」ってキレられるので注意。「ワンクリック」でOKです。
このままでは、Wordpressは表示されないので、FTPツールでwp-config.phpをダウンロードする。
ここでつまずいたんだけど、なぜかパーミッションが400になっており、これでは上書きができない。
該当箇所を修正し、アップロードしても上書きできないと怒られた。
パーミッションをサーバ側で600にし、上書きして完了。
なんか大々的に「Wordpress5.4にようこそー！」的なことを言われた。
かなりどうでもいい…。
config系はこちらのサイトを参考にしました！
https://mbdb.jp/hacks/database-mysql-update.html
2020/04/27 01:05 | カテゴリー：DESIGN
Zoom背景つくってみました
いろんな旅行写真をかきあつめてzoom背景のサイズにしました！自分が真ん中にきたらいい感じの写真がメインだけど、こんな時こそzoomだけでも旅行した気分になってくださいね！
画像をクリックするとフルサイズで表示されますので、右クリックでダウンロードしてください。
フランス
シャルルドゴール空港
信じられないくらいおしゃれでレッドカーペットで、スタイリッシュな空港。
セーヌ川
渋いあなたをアンニュイに演出したいときに。
トルコ
Love Valley
まるでナウシカのような世界。カッパドキアでは、こんな景色が広がっています。
カッパドキア
あなたが移動すると、真ん中のバカップルが出現する、ニクイ背景。
日本
軍艦島
ディストピアに佇みたい、廃墟マニアなあなたのための背景。髪の毛がボサボサだったり、ちょっとぼろい服を着ているときにも演出として使えます。
慶良間諸島：座間味島
今まで訪れた海の中で一番美しい海でした。またいつか行きたい。
対馬：烏帽子岳
韓国と日本の間の島。上対馬と下対馬の間には、こんな不思議な光景が。
このページの画像は個人の利用に限らせていただきます。
再配布はご遠慮ください。
超文系のプログラミング（1）ECMAスクリプト系の話
高校１年生にしてついに数学で赤点をとり、それ以来本格的に数学が嫌いな管理人がお送りするプログラミング入門です。
文系の人でも絶対にできるようになるように書くつもり。
プログラムは数学ではありません！
数学系関数は、数学の知識が必要だが、正直WEBではあまり使わないです。
とりあえずプログラムという言葉から堅苦しい印象をとりのぞいてください。
もちろんこれを読むということは、やる気のある方と推察しますが
できると思うことが大切です。
・プログラムのことを考えるとき、忘れてはいけないこと
JavascriptのようなWEB上で動くプログラムには、絶対に必要なもの、それはユーザーアクションです。
ユーザーアクションとは、「クリック」「入力」などのことを言います。
これは、イベントハンドラという関数でプログラムに伝えられます。
ユーザーアクション：クリック→イベントハンドラ：onClick
という具合。これは割とわかりやすいと思います。
ユーザーが何かをしたときに
プログラムが何かをして
結果をどこかに出す
それがプログラムです。
たまにロードしただけで動き始めるプログラム、あるじゃん？！って言われそうですが
ロードもユーザーアクションです＾＾；；；；
onLoadというイベントハンドラを使います。
イベント＝イベントハンドラ＝イベントトリガー＝関数
みたいな、適当な言葉で大丈夫です。まあ大抵の人には通じますんで。
ちなみに、HTMLタグにonClickをつけていなくても、クリックしたら動くプログラムがあると思いますが、
その場合、かなり「良い」プログラムです。ソース上にイベントハンドラがあることは実はあまり好ましくありません。
良いプログラムは、onLoadで最初に読み込んでおいて、「このタグがクリックされたら」というのを天上で待っていて、処理を投げ返してくれるのです。
でもまあそういうのはあとでいいですｗｗｗｗ
基本的な文法
イベントハンドラ（ユーザーが何かをした）
目的のオブジェクトをプログラムに渡す
場合によっては変数に入れる
処理を実行
処理結果を変数に代入する
HTMLなどに表示
よくあるのが、処理を返す変数を用意しわすれた。とか。
代入し忘れた。というのが
初心者に大変ありがちで私もよくやりました。
結果＝処理；
これを頭にたたきこみましょう。
分岐やループはそのあとでよいです。
2013/08/21 01:39 | カテゴリー：DESIGN
システムのからむ画面をうまく・速く・正しく・便利にデザイン・コーディングする方法
まずは何はともあれ、そのサービスの仕様を理解しなければならない。
ちなみに、私は新規立ち上げはしたことないので、ひたすらリニューアルの経験から語りますのでよろしく。
【まずは、ビジュアルデザインの傾向は、以下を参考にする】
・どんなサービスなの？何ができるの？ウリはなんなの？
・（リニューアルの場合）今、何が問題となっている？
・ユーザー層の傾向は？（性別・年齢・地域・職業等）
・ユーザーのリテラシーは？（低いほうに合わせるのがベスト。サポートブラウザも含め）
・どこでコンバージョンするの？
・どこで売上が発生してるの？
・ユーザーアクションは、どこにたどり着けば目標が達成される？そのための最短のアクションはどれ？
→これをもとに、ＣＶが発生する部分、誘導させたいところを中心にコントラストを強く。読まれればいい情報は上品に飽きないようなデザインにする。
バナーとか、リコメンドとか、副菜になるものはカラムきってどっかに追いやる。その際、テイストを損なわず、メンテしやすくしておくこと。
※インクルードファイルの使い方は覚えよう。
フッタはインクルードなのか、SEOのために自動生成するのか把握する。
・SEO担当とは仲良くしておこう。
・最終的に、SEOフッター、パンくずの設計もできるようになると重宝される。
【DBとコーディングとレイアウトを結び付けて考えて行く】
・どんなデータが入ってる？数字なの？日本語なの？英語もあるの？画像も扱ってる？
・画像の最大の大きさは？画像取得ロジックはどうなってる？自由にリサイズさせてもらえる？
・画像のaltはどうしてる？キャプションは必ずつくの？DBのどこかからとれる？
・最大文字数（これ必須）数字も桁数。よく言われるのが、英語か数字かなんかが続くと折り返さないやつね
・必須のデータはどれ？必須じゃないけど「持ってるデータ」はどれ？両方入るようにデザインしないといけない。
・右寄せと左寄せ、交互にくればかぶらないかっていうとかぶったりするので、テキストが終わったあと、必ずマージンをつけて、その次が右寄せ、という考え方をする。
・あと箱の中に、色々情報入ってるけど、どれが抜けても最終的に余白が均等になってればかっこいいコーディング。
・フロートしまくったリストタグはページ内でセンタリングができません。※リストタグの幅が決まってるなら別。 だからページングは、実はリストタグは理想的ではない。
【トラブルを未然に防ぐ】
・ページの幅全部とる要素には全てclear:both;をいれる、必要なくても、かなりたくさんのトラブルが防げる
・高さの同じ箱が続く場合、データで上下しないように、JSで高さをそろえる魔法をかけておく。
・共通事項を先に全部コーディングして、ブラウザチェックまでやっておく。
・全ての要素がマークアップで個別に指定さえできれば、デザイナーにできないことはあまりない。とりあえず「必要なくても全部何かクラスかidふっておく」。もしくは、特定のIDの中にユニークなタグでマークアップしておく。
・「CSSでたて真ん中揃えはできません」を会議でなんども口すっぱく言っておく。最悪テーブルタグで対応することになるがかっこ悪いから避けたい。
【SEOってデザイナーもやるの？】
・できたほうがいい。一番大事なのは、「デザイナー兼コーダーの人」が、マークアップを最適にできるかどうかだ。キーワード選定・メタタグはSEO担当に任せておけばいい。※キーワード選定は企画段階で決まってないと意味ないけどね
たとえば、altを忘れないとか、隠しテキストを使わないとか、Hタグで重要な部分をマークアップする、プレーンテキストはPタグで囲むなどなど。
文書構造を正しく理解していることがとても大事。タグの知識は必須。
「ここは見出しです」「これはその中の更に下の見出しです」「これは説明文なのでテキストです。パラグラフのPでマークアップしました」「この単語は重要なのでstrongタグでマークアップしました」「これは、項目を並べているのでリストタグでマークアップしました」
と理論的に説明することができ、構造が正しいと、グーグルは「正しく書かれている、ユーザーに実益のあるページ」とみなすようだ。
CSSはあとからついてくるので、それほど頑張らなくてもいいが、実は時間かかるのはCSSの実装だったりするんだけどね。CSSはデザイナーしかわからない、っていう会社はすごく多いが、その分、プロフェッショナルとしてDWを酷使して頑張ろう。
経験したバグは、エヴァーノートやブログにまとめておこう。あとで参照できる。
【ここまでやっても、まだ求められる美しさ。】
こんなに色々やってあげてるのに、上司はそれでも見た目をすっごく気にしてる。SEOもやって、コーディングも正しくやって、自分でリンクもチェックした。上司は見た目だけ気にしてる。すごい腹立つ時があると思う。でもこれが、デザイナーの腕の見せどころなのだ。
凝ろう。
何に凝るか？それは、１ピクセルにだ。
くだらない話と思わないでくれたまえ。たとえば、罫線の薄さ。罫線は薄くないといけないが、視認はぎりぎりできないといけない。でもそのギリギリ感が上品なのだ。
ボタンのクリエイティブ。
今、１ピクセルの枠で囲むのが流行ってる。なぜか？トレンドもあるが、メリハリがつく割に上品だからだ。もうグラデーションやリフレクションの時代は終わろうとしている。
１ピクセルの枠に、１ピクセルのハイライト。１ピクセルの反射に、１ピクセルのシャドウ。これがかっこいいとみなされるし、私もそう思う。
そして次に凝るのが、色だ。
最近はコントラストが薄いのが流行りだ。でも薄ければいいものではない。CVが発生する部分は強調しよう。あくまで上品にだ。そして、文字色も、違和感のない色相内で、「割と補足的な情報」を色を薄くし、フォントサイズを下げるとすごくかっこよくなる。
色でコントラストをつけることもできる。全体的にピンクな画面に、ボタンだけ明るい青っていうのもありだ。ボタンの色がどれがいいかなんて議論は、絶対にあってはならない。
ボタンの正しい色は、コントラストが他と違う、「目立つ色」なのだ。目立たなければ、気づいてもらえない、押してもらえないのだ。
全体で配色を考えなければならない。理論的になろう。色彩学をがんばらなくてもいいが、明度、彩度、色相の意味を知ろう。
コントラストをつけるためには明度を下げるのか？彩度を上げるのか？色相で補色をあえてとるのか？少しずらすのか？そういう考え方だ。
ラフ案をモノクロでつくることをオススメする。先にコントラストを全部グレースケールで見せる。その後、色をつけていけばとても簡単だ。
＞上司＆プログラマーへ
こんなにデザイナーちゃんたちはがんばってるので、たまにはほめてください。
すごい仕事してると思います。プログラマーは確かに分岐ばっかりで嫌になってると思いますが、マイク●ソフトに振り回されてるのはおいらたちです。
ブラウザなんて一個になればいいのに(ﾟдﾟ)