サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
デスク環境を整える
note.com/chot_designer
こんにちは、ちょっと株式会社デザイナーのモです。 挨拶から間髪入れずで申し訳ないのですが、まずはこちらをご覧ください。 何の変哲もないテキストとアイコンで構成されたボタンです。 今回はこちらのボタンに物申したく筆を執らせていただきました。思うところがあるんだよ今の私には。 ずれている、Noto Sans JPという訳で早速本題に入りますが、単刀直入に言ってこのボタンずれてるんですよね。「暑いね」って言ったら「水飲めば?」って言ってくる人くらいずれてる。私怨はさておき具体的に表すとテキストとアイコンが上下にガクンとずれているって訳です。 論に拍車をかけるためにボタンに分割線を引いてみました。 アイコンは上下真っ二つだがテキストはどうも下に寄っていますぞなぜずれる、Noto Sans JPこれが目の錯覚…なら良かったんですが(良くない)実際にずれていて、ではなぜそんなことになっちゃっているのか
こんにちは、ちょっと株式会社の久保田です。 突然ですが『シティーハンター』は好きですか? 好きですよね?? 説明なんて一切不要だと思いますが、日本に冴羽獠が現れてからもうすぐ40年。 原作は6年半の連載期間を経て最高の結末を迎え、その連載と並行して放送されていたテレビアニメは大ヒット、そしてアニメ映画化もされました。 近年ではフランスで実写映画化されたり宝塚歌劇団が舞台化されたことも話題になりましたし、昨年も新作アニメ映画『天使の涙(エンジェルダスト)』の公開は記憶に新しいところです。 そして今もスピンオフ作品が連載中、最近ではNETFLIXでの実写映画化が話題になっていて、現在もアスファルトタイヤを切り付けながら走り抜けてます。 そんな作品を楽しんでいるんですが、ふと「シティーハンターのロゴってこれだっけ?」って気になってしまい・・・ こうなるとロゴ大好きデザイナーは止まりません! 原作
こんにちは、ちょっと株式会社の久保田です。 「錯視」と言えば、かの有名なエッシャーの立体錯視によるだまし絵や、あるはずの無い色が見えてしまう錯視や直線が曲がって見える錯視などなど、世の中には数多くの錯視効果が存在します。 この錯視ってやつ、見た目を狂わせてくるのでデザイナーとしては非常に厄介なもの。 錯視による小さな違和感がグッドなデザインを台無しにすることも珍しくありません。 乱暴に言ってしまえば“視覚のバグ”なので「だって人間だもの」と割り切ってしまうこともアリです。だって人間だもの。 しかし、そんな視覚のバグすらコントロールしてやろうって考えるのも当然のこと。だってデザイナーだもの。 錯視効果と処理例は色んなところで紹介されていますが、ここではWebデザインで意識したいものだけに絞って3つほどピックアップしてみました。 上方距離過大の錯視最も有名で、最も意識すべき錯視な気がします。
こんにちは、ちょっと株式会社の久保田です。 Webサイトを開発する工程の中に、お問い合わせやエントリーなどを受け付ける「入力フォーム」を設置することがあります。 一見するとテンプレ的に単純作業に思われがちですが、デザイナーが考えるポイントは意外と多く、必要に応じて時間を掛けて作り込むものだったりします。 そんな入力フォームを作る際に意識しておきたいポイントを、自身への教訓も込めてまとめてみました。 視点の移動とグループを意識したレイアウトスムーズに視点移動させる並べ方まずは大枠のレイアウト。ザッとテーブルのように組んでしまいがち。 サクッと5分くらいで組んじゃうラフレイアウトこれでも大きな問題ありませんが、少し踏みとどまって考えてみます。 改善したいのはラベル(項目名)と入力欄の位置関係。 表組のように横並びの関係にするのではなくて縦並びの関係にしてみます。 ラベルと入力欄が横並びになって
デザイナーのemiです。 AIの進化のスピードがものすごく速くて、ワクワクしますね。ここで仕事がなくなるのでは。と心配しているだけでは本当に仕事がなくなってしまうのではないでしょうか。こんなワクワクするものを避けるのはもったいない。ということで、Webデザイナーの私がChatGPTを使ってみました。 対話形式のChatGPTをどうデザインに生かす?エンジニアが使う場合はコードの一部分を出力してもらって時短。という使い方も考えられますが、Webデザイナーはどのような場面で使うことができるでしょうか。 例えば、新しくオープンしたケーキ屋さんのWebサイトを作ることになりました。 お店のInstagramはありますが、Webサイトも欲しいです。というお仕事があるとします。 この時に考えられる使い方を挙げます。 想定されるペルソナを考えてもらう サイトの構成を考えてもらう 使用する色の候補を考えて
デザイナーのemiです。 Adobe XDが単体購入を終了し(コンプリートプランでは提供されています)、Figmaへの移行が進むのでは。ということでXDで作成したデザインをFigmaで開くことができる方法はないだろうか。と思い、まずはプラグインを探してみました。 Convertify Sketch/Adobe/Google 有料のプラグインだったので無料で使える期間に試しました。 (お見せできないデザインデータで試したので画像を添付できません。ご了承ください…) カラースタイルやコンポーネントなども移行できました。ホバーステートを設定している箇所は重なったレイヤーが非表示になっていました。 line-heightの扱い方がXDとFigmaでは違うようで、ボタンの部分など上下の中心がずれてしまっているのが気になりましたが、レイヤーの構造などそのまま移行できていました。 プラグインを使用せずに
このページを最初にブックマークしてみませんか?
『chot Inc. デザイナーユニット|note』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く