レイアウト力が上がる！デザイナー視点で考える「余白」｜LANCER UNIT｜ランサーユニット
こんにちは。LANCER UNIT（ランサーユニット）note編集部です。 ランサーユニットの公式noteが発信するクリエイター向けお役立ち記事。今回は、デザインでも重要なレイアウトにまつわるお話です。 そのなかで「余白」についてご紹介します。 「余白」の一般的な意味を調べると、文字通り「余った白い部分」のことですが、デザインをするうえでは「意図をもって作られたスペース」を指します。 この「余白」をただの「余った空間」という認識でいると、余白のあるデザインに不安を覚えることがあります。その場合、余白を埋めようとしてしまいがちですが、ちょっと待ってください！ デザインにおける余白はとても重要なんです。でも、ただ「余白って大切なんです」と言うだけでは伝わりませんね。 「余白」をただの余った空間にしないためには、テクニックと知識が必要。ここでそれをご紹介していこうと思います。 「余白」が生み出す
俺流レスポンシブコーディング
俺流レスポンシブコーディングの覚書。「人には人のレスポンシブ」があるのでこれが正解だってわけではないのですが、レスポンシブコーディングで悩んでいる人にとって参考になる記事になってくれたら嬉しいです。 ブレイクポイントは特定のデバイスの画面サイズを基準にしない 以前アンケートを取った時にデバイスのサイズを意識して決める人が半数以上を占めていた。 アンケート結果を抜きにしても「2021 年のブレイクポイント決定版はこれだ！」的な記事がバズっているのを定期的に目撃し、主流のデバイスのサイズを比較するアプローチがほとんどであるが、僕はデバイスの端末のサイズを基準にブレイクポイントを決めることには否定的である。 主流のデバイスのサイズなんてものは時間が経てば変化する。 昨年 iPhone 12 が発表された時に従来の画面サイズとは違うバリエーションになることが分かるやいなやタイムラインが慌てふためい
Webデザイン初心者がつまづきがちな共通点
この記事について この記事は、スマートフォン時代のWebデザインスクール や Web制作の基礎から学べる「Webコーディングスクール」 の資料制作をお手伝いして頂いているemiさんによる寄稿記事です。 emiと申します。USAGI DESIGN emi.というサイトでWebデザインやコーディング練習用のデザインデータを配布しています。普段はWebデザインやコーディング、メンターなどをしております。 初学者によくある共通点 Webデザインを学習中の方のレビュー（デザインのチェック）をしていて、いくつか共通のことがあることに気づいたのでまとめてみました。 フォントの種類を使いすぎてしまう最小フォントサイズは10pxフォントの規約についてワイヤーフレームがあるとデザインがワイヤーフレームに寄ってしまう余白はきちんとあるのに違和感があるドロップシャドウやぼかしが濃いめ写真素材の検索時のキーワードの
レイアウトデザインの視点を増やす 思考＆Tips｜ハラヒロシ / デザインスタジオ・エル
はじめにこのnoteは、私がTwitterで発信した「デザインの思考＆Tips」のなかから、レイアウトデザインに関する内容を編集してまとめたものです。普段のデザイン業務で私が意識している、webデザインを中心としたレイアウトの考え方やTipsを紹介します。 「レイアウト」といっても、ただ単にドキュメント上に要素を置くのは誰でもできます。どんな素材にするか、どんな動線にするかを考えて位置を決めていくのが「デザイン・レイアウト」。こちらがデザイナーの仕事ですね。デザイナーは、達成したい目的のために秩序を与えつつ工夫していくことが求められます。 では、配置するにあたってどのようなことを意識したり注意すればよいでしょうか。 川の流れのようにレイアウトするにあたっては、情報の優先順位を決めてそれをボリュームで割り当てるのが基本です。ただし、これだけだと単に積み重ねているだけで流れが悪いので、視線が滑
レスポンシブデザインに見るデザインカンプと実装との溝
デザインカンプを基に実装する難しさはあらゆる場面で語られます。私の場合は特にレスポンシブデザインに関する仕様の解釈に悩む場面が頻繁にあります。 その問題点はどこにあるのでしょうか。私の制作したツールの紹介を通して、グリッドシステムのあり方やレスポンシブデザインの意味などを考察しました。 デザインカンプとワークフローの関係性 ウェブサイト制作のワークフローでは、クライアントとの上流での合意形成と開発者への指示書との役割をデザインカンプが兼ねるパターンがよくあります。デザイナーはウェブページの実装仕様を決定しながらデザインカンプを制作し、開発者はデザインカンプを通して前工程での決定を読み取りながら実装します。 デザインカンプを基に実装する難しさの一因は、それがシステムが取り得る状態のうちの一場面を切り取った単なるスナップショットでしかない構造です。 仕様を理解するためには、デザイナーが想定する
拝啓、お客様。Webサイト制作のコストはここにかかります。 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
令和ですね。こんにちは。バックエンドエンジニアのまさくにです。ゴールデンウィークで休んでいたら、シュワシュワと筋組織が融解し、「自然に帰ろう……自然に帰ろう……」と遺伝子に刻み込まれた内なる声が僕を光射す方へ誘いました。もはや社会復帰は難しいかもしれない。 さて。さてさて。 皆さま、いかがお過ごしですか。新しい期に入り、心機一転したい気持ちでしょうか。何ならアレですか。お持ちのWebサイトをリニューアルしたい、そんな気持ちをそろそろお持ちでしょうか。 失礼ながら、そのお気持ち、 たぶん5ヶ月、遅いです！ 仕事としてWebサイトの制作に携わってから、5年くらいが過ぎました。現在はバックエンドの作業を行いながら、TD（テクニカルディレクション）やPM（プロジェクトマネージャー）として、プロジェクトに関わることも増えてきています。その観点から言って、お客様と我々の間には「Web制作」の考え方にお
「なんか違う」と言われないためにデザイナーができること｜はちこ
「イメージと違います」 これはデザイナーが一番言われたくないし、言われると悲しくなるワードだと思います。 私も今までこの言葉を聞くと「自分のスキル不足が原因だ・・・」と落ち込んでいましたが、最近、この原因は2つに分類できて、そしてそれは全く別物のスキルだと気付きました。 ①ゴールとなるイメージを、技術不足により再現できていない ②ゴールとなるイメージを、依頼者と共有できていない①は技術的な絵作りの力 ②はコミュニケーションの力 なので、イメージと違いますと言われたとき、デザイナーだと①の方に原因を見出してしまいがちですが、②の方が実は重要なんじゃないかと思い始めています。 なぜなら②が土台としてないと、①のスキルがどれだけ高くてもゴールの方向がずれてしまうから。 逆に②がめちゃくちゃしっかりしていれば、多少の技術不足はデザイン後のコミュニケーションでカバーして軌道修正していくことができると
これだけ守れば見やすくなるデザインの基礎
2019/04/18に株式会社gumi様で行ったデザイン講義のスライドです。 デザインとは何か？デザイナーは何を考えてデザインを作っているのか？ という話から、実際にデザインを評価・検討するための言葉を紹介しています。 この 作品 は クリエイティブ・コモンズ 表示 - 改変禁止 4.0 国際 ライセンスの下に提供されています。 第二回「UIデザインをはじめよう」はこちら https://speakerdeck.com/kinakobooster/uidezainwohazimeyou 第三回「今日からできるUXデザイン」はこちら https://speakerdeck.com/kinakobooster/jin-ri-karadekiruuxdezain ※訪問講座のご案内※ あなたの会社に話しに行きます。料金表はこちら https://xemono.life/#/workwith/co
女子大生がデザインを外注したら、３ヶ月後にデザイナーになっていた話〜お仕事獲得編〜｜なみもりなみこ｜note
どうも！クックパッドとフリーでUIデザイナーをしているなみこ（@MediocreNami）です。 デザイナーとして働き始めて半年が経ってしまいました......。時の流れが早すぎる。 今回は、私がよく聞かれる質問ランキング２位「独学からどうやって仕事になったの？」について書こうと思います。現在デザイン独学中の方や、会社勤めでこれからフリーのお仕事をしようとしている方の参考になれば嬉しいです。 デザイナーになりたいという意思表示をする事業立ち上げをしていた時にアプリなどのデザインをフリーランスのデザイナーさんに外注したことをきっかけに、私はUIデザイナーへの道を志すようになりました。（１記事目のサマリー） そして空き時間に動画教材を見たり勉強をしはじめたのですが、勉強するだけではもちろん誰からもお金は貰えません。 私は文系大学休学中の4年生ですし、ちょっと前まで「デザイン？なにそれおいしいの
デザインがしんどくなったあの日のデザイナーへ｜アラキシュート｜note
「5年後、どんなデザイナーになりたいですか？」 10年以上前、新卒未経験だった私が、最初に入った会社で聞かれた質問です。 面接では誰もが通るこの質問。 当時の私は「1年先のことすら分からないので、壁にぶつかったら都度考えて軌道修正します」と答えました。平凡でよくある返しですが、その考えは10年以上経った今でもさほど変わってない気がします。 一方で、腹のなかでは「俺は俺の考える最強のデザイナーになる！」みたいな思いも抱えていたことを白状しておきます。私はデザイナーとして、得体の知れない何かに向かって、とにかく勝ちたい！と思うタイプのデザイナーでした。 私が働き始めた当時、デジタル界隈では中村勇吾さんをはじめとするFlasherが私のヒーローでした。何かに勝ちたい私は、中村勇吾さんが一時在籍していたbAという会社に中途で滑り込みます。 それからの5年間、とっくにFlashは使わなくなっていまし
ユーザーを中心にした仮説の立て方
- デザイン学習コミュニティのCocoda!における仮説の立て方について話しています - どのように仮説を立て意思決定していくのか具体的な例を交えた内容になっています
2018年末に考えるSketchデザインデータ
前置き 本編の前に、現在の環境について少しだけ前置きを書きたいと思います。 仕事は主にC向けサービスのデザイン（WEB版）をしております。 ツールは普段からSketch+Abstractを使用しており、担当デザイナーは私だけで、他のデザイナーと共同作業することはほぼありません。またHTML+CSS(+見た目に関わるjsなど)は自分で書くことが多いです。 なので、Abstractはバージョン管理＆クラウド＆たまに他の人への共有として利用しています。（インスペクタ機能もアルよ!!使ってない!!） サービスの規模は中〜大向けの記事になるかと思います。 それでは早速本編に入りたいと思います！ 使用アプリケーション Sketch Abstract Sketchのライブラリ機能を使う ライブラリ機能が実装される前に始まったプロジェクトの場合は特に、ライブラリを使用するかどうかが悩むポイントになるかもし
僕がヤフーを辞めた4つの理由｜宇野 雄（saladdays）｜note
6年間勤めたヤフー株式会社を退職します。在籍は2019年の1月末までですが、12/5（水）が最終出社日でした。今は絶賛有給消化中（全57日のうち4日目）です。 これはいわゆる退職エントリーではありますが、別にここからヤフーの悪口を並べるつもりはありません。どちらかというとその退職するに至る根本にあった僕のデザイナーとしての仕事のスタンスやキャリアの考え方、ちょっと生臭いお金のお話をできればと思います。 はじめに結論だけ言いますと「別にヤフーを辞めなきゃいけない理由はなかった」です。転職や退職を目的としていたわけではなく、市場価値をより高める続ける方法を考え、結果的として退職という手段に行き着いただけです。 大きく考えたのはこの4つです。 ・ヤフーでの実績をきちんと積めた ・自分の成長の鈍化を感じた ・自分の学んだことを更に活かせる場に行きたかった ・市場価値をより高め続けるための戦略ヤフー
【DAY-1】 忙しい人向けの #Designship2018 まとめ｜nozoe | conoito
今回は、いつもお世話になっている仲良しの先輩方、せりかさん（@celica_i）、ひのふさん（@hin0arashi）、同期のこけしちゃん（@kisiko418）と一緒に参戦しました〜〜〜みんな何かと集いがち〜〜〜🤟 「核拡デザイン」を探求し続けて中西 元男さん 経営にデザインを取り入れる重要性、経営とデザインの関係性についてのお話でした。 ● そもそも、核拡（かっかく）デザインとは？ 経営企業者に理解されるためのデザインとして、「核」と「拡」を満たすことで、経営変革を生み出すCI(コーポレートアイデンティティ)を構築できるとのこと。 ● プロダクトの成長のためにデザイナーが今求められていること 工業化時代は、マーケティングの拡大のしかたが 「体力（人・もの・金・情報）」 ↓ 「知力（想像力・洞察力・開発力）」 ↓ 「魅力（表現力・演出力・伝達力）」の順だったが、高度情報化時代に差し掛か
デザインをいつみせるか、どう伝えるか - Speaker Deck
2018/11/24 開催の FRONTEND CONFERENCE 2018 にて登壇させていただきました。 以前デザインの勉強会にてお話させていただいた「デザインを３割で投げ出す技術」の続きのお話になります。 ======================================== デザインをいつみせるか、どう伝えるか 制作フローの中にある、「相談」について考えてみました 「デザインに悩みすぎて進捗が出せない」 デザイナーになって間もない頃に抱えていた私の悩みは、 人に「相談」することで解決できるようになりました。 しかし、「相談」するものの、思うように伝わらなかったり、 ずれた答えが返ってきたり… デザイン制作の場面で重要な、「なぜ相談するのか」や 「どう相談するか」といったコミュニケーションの工夫をお話します。
デザインシステムの最初の一歩として原則を作る理由 : could
メンタルモデルから始めるデザインする上でユーザーのメンタルモデルの理解は欠かせません。 UI やコンテンツに出くわしたとき、それをどう解釈・判断し行動するかを決めるのがメンタルモデル。 Web サイトであれば青色の文字に下線が入っていればリンクであると判断するのも、過去の経験や知識を基にメンタルモデルが築かれているからです。私たちが「使いやすい」「直感的」と感じるのもメンタルモデルとインタラクションが一致しているからと言えます。 同じデザインでも評価は変わるデザインをチームで評価するとき、メンタルモデルが共有されていないために議論が思わぬ方向へ進む場合があります。Web サイトのリンクのように広く使われているものであれば共通のメンタルモデルが築かれていますが、多くの場合そうでははありません。オンボーディング、アイコンの見た目、通知のコピーなど、UI に関わるあらゆる部分で意見の相違が発生し
デザインする上で知っておきたい「近接」「整列」「反復」「対比」の4原則 - NxWorld
webサイト・アプリ・雑誌・チラシなど媒体は問わず、見やすくて内容が伝わりやすいデザインする上で知っておきたい「近接」「整列」「反復」「対比」の4原則を紹介します。 近接 - PROXIMITY 関係性の近い各要素の距離を近づけて配置することで位置的にそれらが関係があるものと認識され、見ている人に理解されやすいデザイン・レイアウトを作ることができます。 その際、近接を上手く活用したいときに気を付けたいポイントは余白で、何となくでつけるのではなく関係性があるものとそうでないものでそれぞれ異なる余白にすることです。 上のイメージは様々なスポーツのボールイメージと競技名を並べたものですが、近接が考慮されていないためにそれぞれどのボールがどの競技なのかがわかりづらい印象があります。 これを近接を意識して配置し直したのが下のイメージで、関係性がわかりやすくなり上のイメージに比べてどのボールがどの競技
Atomic Designを分かったつもりになる
「Atomic Design」（アトミック・デザイン）という言葉がしばしば聞かれるようになってきました。実際にちょっとしたトライアルをしつつ、Atomic Design について考えてみました。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Stock - 日本のWebデザインギャラリー
個人的に実践しているWebデザインガイドラインまとめ｜TAK / Web Creator.｜note
