Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
線で考える画面構成
Search
Sponsored
·
Ship Features Fearlessly
Turn features on and off without deploys. Used by thousands of Ruby developers.
→
natsuume
March 17, 2025
Design
980
1
Share
Embed
Copy iframe code
Copy JS code
Copy link
Start on current slide
線で考える画面構成
2025/03/18 株式会社オプト 社内勉強会資料
natsuume
March 17, 2025
More Decks by natsuume
See All by natsuume
Prompt-Based Hooksの罠
natsuume
0
360
5W1H ~LLM活用プロジェクトを推進するうえで考えるべきこと~
natsuume
0
930
LLM API活用における業務要件の検討
natsuume
0
270
自然言語処理基礎の基礎
natsuume
0
300
5分ですこしわかった気になる Deep Learning概要
natsuume
0
110
ChatGPT / OpenAI API実用入門
natsuume
0
300
Chat Completions APIにおける実行時間の検証
natsuume
0
480
Other Decks in Design
See All in Design
ClaudeCodeでマーケターの課題を解決する
kenichiota0711
11
14k
デザインコンテキストのバトンをつなぐ—AI時代のプロダクトマネジメント
kumanoayumi
6
1.2k
結びながら、ひらく - にじむ境界のデザイン
hilokifigma
4
1.7k
デザイナーが主導権を握る、AI協業の本音と実践
satosio
7
3.4k
デザインの文脈を理解する:エンジニアがデザインカンファレンスに参加して得た学びと気づき
hypebeans
0
240
Connpass-Xperia_Camera_App_by_HCD.pdf
sony
1
690
「親切なオンボーディング」 が招く罠 ー AI時代のUXデザイン
godlingkogami
1
140
広い関与の可能性に どう向き合うのか? 私たちは。|Timee MarketingDesign 2026-06-18
bebe
0
250
全員がアウトプットを出せる時代、 誰を採用する?
nishame
0
610
20260215独立行政法人科学技術振興機構(JST) 社会技術研究開発センター(RISTEX)ケアが根づく社会システム _公開シンポジウム
a2k
1
230
AIネイティブスタートアップにおけるプロダクト開発の新常識 / Product Development Tips in AI-Native Startups
saka2jp
2
1.3k
AIスライドデザインを生成する仕組みを社内共有する
kenichiota0711
7
5.7k
Featured
See All Featured
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
9
1.4k
The Cost Of JavaScript in 2023
addyosmani
55
10k
Optimizing for Happiness
mojombo
378
71k
Hiding What from Whom? A Critical Review of the History of Programming languages for Music
tomoyanonymous
3
900
Darren the Foodie - Storyboard
khoart
PRO
3
3.4k
The Invisible Side of Design
smashingmag
301
52k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
55k
WCS-LA-2024
lcolladotor
0
680
Conquering PDFs: document understanding beyond plain text
inesmontani
PRO
4
2.9k
ラッコキーワード サービス紹介資料
rakko
1
3.9M
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
55
3.4k
Principles of Awesome APIs and How to Build Them.
keavy
128
18k
Transcript
線で考える画面構成 2025/03/18 社内勉強会
この発表で扱うこと イラストや写真・映像制作における理論・セオリーの紹介(一部) 特に、画面の構図(を構成する「ライン」という概念)について ※自分はイラスト・写真・映像制作を実際にやった経験はほぼありません (スライド中の例などは自分で作っているので100%正しいとは限りません)
参考資料 Visionストーリーを伝える:色、光、構図 - 著者 - ハンス・P・バッハー - サナタン・スルヤヴァンシ https://www.borndigital.co.jp/book/14907/
ライン(コンポジショナルライン、構図線)とは フレーム(画面)内の要素の位置関係や視線がたどる経路を抽象的に表現したもの ラインのタイプや関係によって、様々な効果を与える - 鑑賞者の視線が達するまでの時間 - 喚起される感情 - 画面の雰囲気
同じ長さ・本数でも受ける印象・想起される内容は変わる
はじめに 完成物からラインを考えてみる
問題:これは何でしょう?
正解は 引用:https://store-jp.nintendo.com/item/software/D70010000000026
引用:https://store-jp.nintendo.com/item/software/D70010000000026
問題:これは何でしょう?
正解は 引用:https://store-jp.nintendo.com/item/software/D70010000063713
引用:https://store-jp.nintendo.com/item/software/D70010000063713 雨や雪、雲などの天候要素は、 その方向や動きをラインとして考 える
ラインの方向 水平のライン 垂直のライン 斜めのライン ※フレーム(画面)には、各辺(エッジ) + 角の対角線の6本のラインが隠れている
ラインの方向 - 水平のライン - フレームエッジとの調和、静的 - 不活発、静止した状態、静か - 水平線、海や湖、開けた場所を想起させる -
垂直のライン - 直立し、重力に抗う力強さ - エネルギー、気品 - 木や建物、頭上高くそびえるものを想起させる - 斜めのライン - ドラマやエネルギーが際立つ - 動き、ダイナミックさ - 崩れたバランスと動揺を想起させる
ラインの方向 水平のライン 垂直のライン 斜めのライン
ラインの配置 画面内のラインは、フレーム(画面)を分割しサブ画面を構成する効果がある 均等・対照的な分割は自然界ではほとんど目にしないため、静的・人工的な印象を与える
ライン・フレーム間の調和・対比 調和が取れている状態は、フレームの4辺や画面内のラインに対して別のラインが並行 な状態を指す(?) - ラインの調和 - 閑さや美しさなど穏やかな瞬間を表すのに適している - 過度に調和の取れた状態は退屈に感じられる -
ラインの対比 - ダイナミックな印象、ドラマチックな展開の激しさを表すのに適している
調和の例
対比の例
調和・対比から受ける印象の違い 調和したラインの組み合わせは視覚的な緊張はなく、平穏な印象 対比をなすラインは視覚的な緊張をもたらし、ドラマチックな印象
調和・対比の組み合わせ 調和したラインの中に対比を加えると、特定の部分を目立たせる効果がある
ラインのリズム - 規則的なライン - 整然とした画面、機械的・無機質な印象を表すことができる - 退屈・味気ない構図になりやすい - 不規則・ランダムなライン -
自然な印象や面白さを表す - 中立的な感情
規則的・不規則なリズム
おまけ - シェイプ - 「ライン」の概念を二次元平面・領域上に拡張した概念 - 構図 - ラインやシェイプに明度や色、光、情報量などの要素を複合的に考慮するよう拡張した概念