見本のデザインを模写することで、デザインの意図を理解したり技法の感覚を身に付けることができます。
見本デザインを模写して身に付く事とは
皆さんが子供の頃に習字の授業や習い事で、お手本を見ながら写して字を書いた経験がある方もいらっしゃるのではないでしょうか。
字を写しながら練習しているうちに、段々とうまくなってきてお手本に近づいた字になっていきます。
デザインスキルを身に付ける手順も習字の練習と似ており、練習方法の１つとしてデザインを模写するという方法があります。
最初から真似をしながらオリジナルデザインを考えた方が早いんじゃないのかな？わざわざ模写して身に付くことって想像がうまく出来ないなぁ。
デザインを真似して作っているつもりでも、特に初心者の方はうまく似たように出来ないことがよくあるんだ。デザインが上手く作られている理由は、模写をしながらよく観察することで気づくことが多いよ。気づいたことはオリジナルアプリのデザイン作成に活かせることが多いから是非身につけていこう！
デザインを模写する作業の流れを確認しよう
模写の作業をする流れを確認して、全体像を把握していきましょう。
- 見本のGoogleスライドを確認
- 模写用のスライドを開く
- 図形ツール、塗りつぶしの色、枠線の色、テキストの色を使って作成
- 画像を挿入する
- 見本と見比べて作成していく
見本のGoogleスライドを開こう
それではまず、見本デザインを確認していきましょう。
共有ドライブの「模写作業用の見本デザイン」というスライドから見本デザインを確認してください。
以下は見本デザインの画像ですが、記事上だと小さく表示されているため出来るだけGoogleスライドの見本デザインを確認するようにしましょう。
Googleスライドで見本デザインを模写しよう
見本のGoogleスライドを開いたら、いつでも見本が確認出来るようにページは閉じずにそのまま開いておきましょう。
模写作業は、別のタブを開いて行っていきます。
模写の作業時に意識したいこと
以下の３点を意識して作業していきましょう。
１．まずはヘッダーから作ってみよう
ほとんどの方が、デザインを模写する作業は初めてのことかもしれません。
気を楽にして着手するためにもまずは、要素の少ないヘッダーから作業を始めていきましょう。
ヘッダーとは、デザインの一番上にある「PIKATRIP」のロゴや「新規会員登録」のボタンがあったりする細長い部分のことを指します。
以下の画像の一番上のオレンジの範囲がヘッダーです。
また画像内には以下のように、デザイン上での表示範囲の呼び方の区分がしてあります。
- ヘッダー
- メインビジュアル
- サイドバー
- メインコンテンツ
- ページネーション
- フッター
この後の模写作業の説明で、上記の呼び方を使っていきますのでこのような呼び方をするのだなと気に留めておきましょう。
ヘッダーを作ってみてなんとなく作業の流れが掴めてきたら、メインビジュアル、メインコンテンツと作業を進めていってみよう！
２．完璧に同じに見えなくても大丈夫
意外なことに思われるかもしれませんが、「完璧に同じに見えるように作らないといけない…」と意識しなくても大丈夫です。
Googleスライドは誰でもスライド等を作ることの出来るとても便利なツールですが、デザイン専用のツールではないため厳密なデザインを作成することは難しいです。
今回の模写作業では、見本と同じになるよう目指して作業することでデザイン感覚を身に付けることが目的になっています。
見本を目指して作業する中で、自分が何を考えて同じにしようとしているかを感じながら行うことでよりデザインスキルを効果的に身に付けることが出来るため、完璧かどうかよりも何を感じるかを重要視して行っていきましょう。
３．書かれている文字の内容や太文字は正確に同じにしよう
先ほどGoogleスライドの特性上完璧を目指す必要はないと説明しましたが、文字の内容や文字が太文字かどうかは見本と正確に同じにするよう意識しましょう。
文字の内容の方が見本と同じじゃなくても別に良さそうなのに、なんで文字の方が正確に同じにしないといけないの？
見本デザインでは文字内容も本当に運用されているようなサイトと同じ文字量や文字内容を当てはめているんだ。文字内容が違ってもぱっと見で影響していないように見えるかもしれないけど、実際になさそうなダミーテキストは「未完成感」がとても出てしまうんだ。見本デザインと同じような「本物感」を出すために文字は同じ内容になるよう意識してみよう！
用意してある空のスライドを確認しよう
共有Googleドライブの中に空のスライドが用意されていますので、そのスライドを開いて作業を行っていきましょう。
まずご自身のSlackチャンネル内のタブにある、「オリアプ開発」タブから共有フォルダを開いてください。
タブを開いて表示された共有フォルダの、「ご自身の名前_オリジナルWebアプリケーション > 02 | デザイン > 01 | デザイン模写作業スライド」にあるGoogleスライドを開きましょう。
スライドの内容を確認しよう
スライド内には以下の２点の内容が含まれています。
- 空のページが１つ
- 縦に並んだ色のついた四角「色見本」
空のページ
縦2800ピクセル×横1440ピクセルの大きさの空のページが１つあります。
縦に並んだ色のついた四角「色見本」
こちらは見本デザイン内で使用している色を四角にして並べています。
使用している色は、ツールバーの「塗りつぶしの色」にも記録されています。
「色見本」と「塗りつぶしの色」の両方を確認しながら模写作業を進めていきましょう。
Googleスライドの仕様上、「見本デザインで使用している色」の四角を消してしまうと「塗りつぶしの色」からも見本デザインで使用している色が消えてしまいます。
四角を消してしまわないよう注意して作業しましょう。
使用している画像を自分のPCにダウンロードしよう
見本デザインで使用している画像をご自身のPCにダウンロードしましょう。
こちらのリンクをクリックして画像の入っているzipファイルをダウンロードしてください。
「mosya_sozai」という名前のzipファイルがダウンロード出来たら、ダブルクリックしてzipファイルを解凍します。
解凍しフォルダが開けたら、フォルダ内に画像が入っているかを確認しましょう。
これらの画像を使用して模写作業を進めていきます。
ヘッダーを作成しよう
それでは模写作業を始めていきましょう。
まずは要素が少なめのヘッダーから作成していきましょう。
ヘッダーは以下の画像でオレンジの表示範囲でしたね。
この部分の模写作業を始めていきましょう。
ヘッダーの背景を作成しよう
まずは、ヘッダーの背景を図形ツールを使って作成してみましょう。
「図形ツール」から四角を選んで、見本と大体同じ大きさになるように意識して四角を作成しましょう。
また、色は「白」を選びましょう。
ロゴを配置しよう
先ほどダウンロードした画像で、「PIKATRIP」と書かれているロゴをドラッグアンドドロップして配置しましょう。
また配置した時はロゴ画像が少し大きいため、ヘッダーに収まるよう画像のサイズを小さくして調整しましょう。
新規会員登録ボタンを配置しよう
ボタンの四角形を作成しよう
右端にある「新規会員登録ボタン」を作成しましょう。
図形ツールで四角を作成し、「色見本」から新規会員登録ボタンの色を適用しましょう。
ボタンに文字を入れよう
先ほど作成したボタンに、「新規会員登録」の文字を入力しましょう。
ボタンをダブルクリックしてテキストを入力出来る状態にして、「新規会員登録」と文字を入れましょう。
ナビゲーションを配置しよう
最後に、ナビゲーションを作成しましょう。
ツールバーの「テキストボックス」を選択し、ヘッダー内にナビゲーションが全て入るような大きさのテキストボックスを作成します。
テキストボックスを作成したら、「国内旅行 海外旅行 おすすめ地域一覧 ログイン
」のナビゲーションのテキストを入力しましょう。
メインビジュアルエリアを作成しよう
メインビジュアルエリアの表示範囲を確認しよう
メインビジュアルエリアは以下の画像で青色の表示範囲です。
メインビジュアルエリアの内容を作成しよう
次にメインビジュアルエリアの内容を作成していきましょう。
少し難しそうに思えるかもしれませんが、ほとんどが図形ツールやテキストボックスツールで作成されておりヘッダーと同じような要領で作成することが出来ます。
特に検索エリアは、全て図形ツールとテキストボックスツールで作られています。
「年末年始に過ごしたい旅館特集」の背景画像は画像フォルダのものを挿入しましょう。
サイドバーを作成しよう
サイドバーの場所を確認しよう
サイドバーは以下の画像で紫の表示範囲です。
サイドバー内にランキングを作成しよう
次にサイドバー内にあるランキングを作成していきましょう。
一般的なWebサイトではサイドバーに色々な要素が入っていますが、今回は練習のためランキングのみ作成していきます。
- 宿泊サイトの画像は画像フォルダにあるものを挿入しましょう。
- ランキング順位の丸部分の背景色は色見本から選びましょう。
サイドバーの大きさはGoogleスライドの仕様上見本と厳密に揃えることは難しいから、大体同じになるような大きさで作成していこう！
メインコンテンツを作成しよう
メインコンテンツの表示範囲を確認しよう
PIKATRIPにおけるメインコンテンツは、以下の画像で緑色の表示範囲です。
メインコンテンツの宿泊施設の一覧を作成しよう
宿泊施設の一覧も図形ツールとテキストボックスで作成することが出来ます。
ページネーションを作成しよう
ページネーションの場所を確認しよう
ページネーションとは、画面内にコンテンツが長くなる場合に別のページで表示出来るようにコンテンツを分割して表示する機能です。
メインコンテンツの下部にある以下の画像の表示範囲を作成していきます。
ページネーションを図形ツールとテキストボックスを使って作成しよう
ページネーションのデザインも、図形ツールとテキストボックスを使って作成することができます。
フッターを作成しよう
フッターの場所を確認しよう
フッターは以下の画像でピンク色の表示範囲です。
Webサイトによっては、ロゴが入っていたりサイトマップが入っているような大きなフッターになっていることがあります。
今回は練習のためコピーライトのみ入ったフッターを作成していきます。
コピーライトを記載したフッターを作成しよう
図形ツールとテキストボックスを使って、コピーライトを記載したフッターを作成しましょう。
オリアプのデザイン作成に向けて
ここまでで見本デザインの模写を行ってきました。
この後オリジナルアプリケーションのデザイン作成に移っていきますが、見本デザインの見た目を真似して取り入れて作ってもOKです。
真似してデザインを作るのってしてもいいの？
うん、ある程度は真似してもOKだよ。ヘッダーやサイドバーに入る中身などはサイトによってそこまで変わるものではないから、同じ並びで取り入れるのは大丈夫！対してロゴや画像のデザインは変えられるものだから、同じようなデザインで真似するのは避けよう。
この記事のまとめ
- まずは要素の少ないヘッダーから作成しよう
- Googleスライドの仕様上見本と完璧に同じに作ることは出来ないため、見本と大体の同じ大きさで作成しよう
- 書かれている文字の内容や太文字は正確に同じにしよう
- 図形ツールとテキストボックスツールで大抵の要素は作成出来る
- オリジナルアプリ作成時にPIKATRIPのデザインを真似してもOK
この記事で学んだことをTwitterに投稿して、アウトプットしよう！
Twitterの投稿画面に遷移します