マガジンのカバー画像

ちょってぃのデザインあるある まとめ

7
本
毎日ちょっとずつデザインを学ぼう！デザイン学習サイト「chot.design」が提供する、公式キャラクターちょってぃによるデザインあるある。毎週更新しますのでフォローお願いします！
運営しているクリエイター
Yoshiki Kojima / chot Inc.

ガイドをひくのだ！！ #ちょってぃのデザインあるある （7）

解説 Photoshop・Illustratorをはじめとして、さまざまなデザインツールには「ガイド」という機能がついています。 これは要素と要素をきれいに整列させるための補助機能で、実際に画像を出力したり、印刷をしたりするときには表示されません。 とても便利なガイド機能ですが、引きすぎると、どのガイドがどこを揃えているのかわからなくなってしまいます。 グリッドシステムのように、均等な格子状のガイドを引くのもおすすめです。 整列についてはこちらのレッスンを読んで

Yoshiki Koj…

横文字の用語、その場ではわかったふりしてあとでめっちゃググる #ちょってぃのデザインあるある （6）

解説IT・Web業界では、ふだん聞き慣れない用語が飛び交います。みなさんは漫画に出てきた用語、全部わかりましたか？ LP ランディングページ。資料請求や商品購入についての説明を、1ページにまとめたページです。 CVR コンバージョンレート。コンバージョンというのは日本語で「成約」のこと。例えば資料請求の問い合わせフォームが送信されることをコンバージョンと言います。CVRは、サイトに訪問した人の中から何%のユーザーがコンバージョンに至ったかという指標です。 LPO ラ

Yoshiki Koj…

よく見る写真素材…。 #ちょってぃのデザインあるある （5）

解説バナーやLPをデザインするとき、写真素材サイトから写真を購入して利用することが多いと思います。 こういった購入した写真は他の利用者も使っていることがあるため、偶然にも競合同士で同じ写真を使っているなんてことも…。 特に無料の写真素材サイトを使う場合は利用者が多いため、注意が必要です。 Adobe StockはAdobe製品と連携しているため、効率的に作業ができます。 ピクスタは国内向けの写真が多く、バナーやLPに向いた写真が揃っています。 O-DANは海外の

Yoshiki Koj…

CSSが…効かない…！ #ちょってぃのデザインあるある (4)

解説 CSSの閉じカッコを忘れてしまったがために、デザインが崩れてしまう…あるあるですね。 それ以外にも ・タイポ（スペルミス）してしまう ・セミコロン忘れ ・全角スペースが混じっている ・IDとクラスの指定間違い などなど CSSは普通のプログラミングのようにエラーを吐いてくれないので、余計にこういったミスが起きやすいのかもしれません。

Yoshiki Koj…

UIとUXのちがいって？ #ちょってぃのデザインあるある (3)

解説今回は4コマギャグ形式ではなく、しっかりと解説系にしてみました…！ 昔SNSでバズった、ハインツのトマトケチャップリニューアルの話です。 ハインツはもともと左側のボトルでしたが、こちらのほうが何となく見栄えもよく整った感じです。しかしこのボトルはケチャップが出にくく、飛び散ってしまうという問題を抱えていました。 リニューアル後のボトルが右側。このボトルは逆さに置けるようにすることで、ケチャップが出やすくなりました。 UIというのはユーザーが触る、デジタル製品で

Yoshiki Koj…

修正指示が手書きで来た #ちょってぃのデザインあるある (2)

解説クライアントからの修正要望が、印刷されたデザインに書き込まれて、FAXやメールで送られてくる…あるあるですよね？ 手書きのために読みづらかったり、対応を誤ることも多いのではないでしょうか。 現在はAdobe XDに共有・コメント機能がついていて、ブラウザだけでも利用することができるので、クライアントに負担をあまりかけることなくツールを導入することができます。 スプレッドシートを利用して、修正要望を一覧にして記入してもらうのも効果的です。修正内容の反映状況も一緒に管理で

Yoshiki Koj…

はじめてのAdobe XD リピートグリッドにびっくり！！ #ちょってぃのデザインあるある (1)

解説アプリやWebに特化したデザインツール「Adobe XD」 効率よくデザインするための機能が色々と揃っていますが、なかでも便利な機能が「リピートグリッド」です。 繰り返し表示したい要素を選択し、リピートグリッドに設定。表示された枠をドラッグすると、繰り返し表示される範囲が広げられます。 また、リピートグリッドに設定した画像部分に複数の画像ファイルをドラッグ&ドロップすると、それぞれの要素に画像が当てはめられたり、余白を調整するなどのオプションがあります。 うまく活用し

Yoshiki Koj…