Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Sign up for free
Menu
Search
Features
All features
Private URLs
Password Protection
Custom URLS
Scheduled publishing
Remove Branding
Restrict embedding
Deck Collections
Notes
Features
All features
Private URLs
Password Protection
Custom URLS
Scheduled publishing
Remove Branding
Restrict embedding
Deck Collections
Notes
Explore
Featured decks
Featured speakers
Programming
Technology
Storyboards
Explore
Featured decks
Featured speakers
Programming
Technology
Storyboards
Pricing
Search
Sign in
Sign up for free
Ameba Illustration Guidelines
Search
Ameba Spindle
April 01, 2024
Design
960
2
Share
Embed
Copy iframe code
Copy JS code
Copy link
Start on current slide
Ameba Illustration Guidelines
Ameba Spindle
April 01, 2024
Transcript
15 slides
Illustration Guidelines ver1.0
2 Ameba Illustration Guidelines Introduction
Ameba Illustration System Ameba Illustration Systemは誰でもAmebaらしいイラストが作成できるように構造がシ ステム化されています。 Amebaらしさ原則にもある「心を動かそう」「快く迎え入れよう」を意識して、デザイン のアクセントや、ユーザーフレンドリーな印象を与えるために活用しましょう。 3
Ameba Illustration Guidelines ・Amebaのブランドを表現できる。 ・情緒的な印象を与えられる。 ・多様性、親しみやすさを体現できる。 ・複雑な情報をわかりやすく届けられる。 イラストの役割
イラストの種類 イラストは大きく分けて「キャラ」「オブジェクト」「背景」の3種類があり、それぞれ必 要に応じて使い分けることができます。 4 Ameba Illustration Guidelines キャラ オブジェクト 背景
全体構成 Ameba Illustration Systemはモジュールの組み合わせによってイラストを作成できる仕組 みになっています。キャラ、オブジェクト、背景という3種のモジュールがあり、 それぞれ 独自のルールが規定されています。ガイドラインに沿ってモジュールを組み合わせること で、統一感のある様々なシーンのイラストを作成できます。 5 Ameba
Illustration Guidelines
モジュール詳細 キャラ キャラは頭部、上半身、下半身の3つのモジュールから構成されています。各パーツに何種 類かのアセットが存在し、その組み合わせによって多彩な表現が可能となっています。 6 Ameba Illustration Guidelines パーツ 頭部
上半身 下半身
モジュール詳細 オブジェクト 「オブジェクトモジュール」はそれぞれ単品でも使用でき、「キャラモジュール」と組み合 わせることも可能です。 7 Ameba Illustration Guidelines
モジュール詳細 背景 背景のモジュールは単品で用いることは基本的には無く、 キャラモジュール等と組み合わせ て使用します。 8 Ameba Illustration Guidelines
9 Ameba Illustration Guidelines Illust Regulations
グラフィックスタイル イラストの基本的なスタイルの定義として、カラー、線の規定を敷いています。 10 Ameba Illustration Guidelines Ameba green Yellow green
Black White Lines Colors
カラー イラストに使用するカラーはブランド全体のカラースキームからピックアップして規定して います。 使用色を絞ることでイラスト全体での統一感を図っています。 11 Ameba Illustration Guidelines RGB :
R45 G140 B60 CMYK : C80 M30 Y100 K0 HEX : #2D8C3C PMS : 17- 6153TPX DIC : 2560 Ameba green RGB : R130 G190 B40 CMYK : C55 M0 Y100 K0 HEX : #82BE28 PMS : 15 - 0545TPX DIC : 2545 Yellow green RGB : R0 G0 B0 CMYK : C0 M0 Y0 K100 HEX : #000000 PMS : Black3C DIC : 582 Black RGB : R255 G255 B255 CMYK : C0 M0 Y0 K0 HEX : #FFFFFF PMS : - DIC : 583 White
線 イラストの大きさと線の太さの見え方を統一するため、 人物イラストの大きさに合わせて線 幅を調整します。 (イラストシンボル化時に考慮) 12 Ameba Illustration Guidelines
キャラの規定 イラストの新規作成時、全体の統一性やクオリティを担保するために下記規定をお守りくださ い。 13 Ameba Illustration Guidelines 口、鼻を加えない 目の形状を変えない 線の色を変えない
線幅を変えない 線のみにしない
キャラ Amebaらしさを様々な場面で表現するために、利用します。 年齢、性別などを考慮しながら、多様性を感じられるかを意識します。 14 Ameba Illustration Guidelines
Example イラストを使用する際の事例です。 使用する際の参考にしてください。 15 Ameba Illustration Guidelines
More Decks by Ameba Spindle
See All by Ameba Spindle
Spindle 2025: How AI Agents and Design Systems Are Transforming Web Development
spindle
0
150
MCPで変わる Amebaデザインシステム「Spindle」の開発
spindle
2
4.6k
デザインシステムの力 Webデザイナーとエンジニアのための実践ガイド / The Power of Design System
spindle
10
13k
Amebaデザインシステム Spindleの開発 / The Development of Spindle
spindle
6
3.6k
Spindle UIのつくりかた / Spindle UI: From Concept to Creation
spindle
5
9.6k
Amebaブログ Brand Guidelines
spindle
5
45k
Other Decks in Design
See All in Design
デザインハーネスはじめの一歩
satty9556
1
1.9k
このスロップ時代に良きデザインをつくるには? / good-design-in-the-slop-era
kgsi
1
1.3k
分散するデザイン組織をつなぐ デザインミートアップの取り組み/nikkei-tech-talk49
nikkei_engineer_recruiting
1
420
AIの定期タスクを6本作って、3本止めた話
rai263
0
180
工房としてのAI ── デザイナー、作家、ビルダー
hiranotomoki
0
570
デザインツールを開く前に その画面は誰に何と言わせたい?受託UIデザイナーが顧客解像度を高める 「打ち合わせの場での確かめ方」
garyuten
1
300
Jun Wei | Information Design & Presentation Portfolio
wjw100788
PRO
0
250
Spectrum Tokyo Meetup #26「できることが増えた時、デザイナーは何に時間を使うべきか」
muture
PRO
1
420
言語化しきれなくてもいい〜勉強会を「完璧な成果を出す場」から「不確実な刺激と体験を持ち帰る場へ〜
hott3
0
230
【CEDEC2026】アートとゲームデザインをつなぐVFX設計『GRANBLUE FANTASY: Relink - Endless Ragnarok』における表現と可読性の両立
cygames
PRO
2
1.7k
Typographie et intégration web
goetter
0
190
みんながデザインを担う組織へ。急加速する開発組織でのデザイナーの戦略
mukai_takeru
0
430
Featured
See All Featured
How to build a perfect <img>
jonoalderson
1
6.2k
RailsConf 2023
tenderlove
30
1.6k
From Legacy to Launchpad: Building Startup-Ready Communities
dugsong
0
380
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
508
140k
YesSQL, Process and Tooling at Scale
rocio
174
15k
Ruling the World: When Life Gets Gamed
codingconduct
0
440
Efficient Content Optimization with Google Search Console & Apps Script
katarinadahlin
PRO
1
990
Leo the Paperboy
mayatellez
11
2.5k
Lightning talk: Run Django tests with GitHub Actions
sabderemane
0
320
Reflections from 52 weeks, 52 projects
jeffersonlam
356
22k
Java REST API Framework Comparison - PWX 2021
mraible
34
9.8k
Digital Projects Gone Horribly Wrong (And the UX Pros Who Still Save the Day) - Dean Schuster
uxyall
2
3.9k