美容サロンコンサル・マツエクスクール・オーダースーツ・Webデザインは『INCEPTIONグループ』。

当ブログについて

筆者について

Webスタッフプロフィール

Webスタッフ

WebスタッフをSNSでフォローするならこちら


Post Title

2013、4年頃に地味に流行ってた「ポリゴンデザイン」に挑戦

こんにちは。埼玉県川越のトータルビューティーサロン「BeautyFreak」ではWEBテロリスト”Ringo”です。(※詳しくはBeautyFreakのLINE@アカウント「@bf09」にて)

さっそくですが皆さん、「ポリゴンデザイン」って知ってますか?

2013年の末頃から流行ってきているWebサイトのデザインの1つなんですが、このブログをご覧になっていただいている方はサロンのオーナー様や技術者の方が多いと思うので、初めて聞いた方が多いんじゃないかなと思いますので、軽く「ポリゴンデザイン」ついてご説明をさせていただきます!

ポリゴンデザイン(Polygon Design)とは?

ポリゴンデザインという言葉を初めて聞いたという方でも「ポリゴン」は知っているよ、という方はきっといると思います。

世代によるかもしれませんが、「ポリゴン」と聞いてこんなもの達↓が頭の中に浮かんできたんじゃないでしょうか?

Virtua_Fighter_SS_Ade56d32e9a6c5d3289f90ce5ddf993fd27442078eb551c4f14152723578tnu01000000rp7i

 今回の「ポリゴンデザイン」はそのポリゴンのイメージで大体あっています。

初代プレイステーションやセガサターン、Nintendo64など昔のゲームでよく目にした感じのローポリゴン”風”のイラストをつかったデザインが「ポリゴンデザイン」「ポリゴン風デザイン」なんていう風に呼ばれています。

「フラットデザイン」と相性が良いのが特徴で流行

で、なんでそんな「プレステ4」とか「XboxOne」とか「wiiU」でハイポリゴンが主流の現代にこれが流行ってるのかっていうと…
iOSやWindows8のUIで採用されていて、WEB上でも何年か前から流行ってる「フラットデザイン」と相性が良いからっていう事で、徐々に注目されていったらしいです。国内では有名なWebデザイナーさんのブログが流行ったきっかけだとか。

win8ios8

あと単純にWEBデザインの中では真新しくてオシャレでかっこよく見えるってのもありますよね。きっと。

ガラスっぽい質感で、半透明のグラデーションとシャドウを多様したWeb2.0風のデザインも、出てきた当時はめちゃくちゃかっこよく見えましたもんね。

 で、「ポリゴン風イラスト」の作り方は?

 「ポリゴンデザイン」で検索をかけるといろんなデザイナーの方がわかりやすく作り方を紹介してくれています。

簡単に作れるツールまであります。しかもフリー

【triangulator】(ダウンロードページへ)

僕は今回「Illustrator」を使いました

去年の秋頃にはじめてそれっぽいデザインをやってみたときは【triangulator】を試してみたんですが、なんだか上手くいかなかったので今回は使うのをやめました。

まだ詳細は言えませんが、5月に控えているちょっと大きめな特別イベントの告知DM用に「Illustrator」でポリゴン風イラストつくってみましたよ!

porigon7

5/5の子どもの日に行われるイベントということで、「兜」です!

このほかにもいくつか作りましたが、それは実際に広告が完成したらまたご紹介したいと思います。

やり方はけっこう単純で簡単。ただし時間がかかった…(30分~1時間くらい?)

まずはじめに「Illustrator」のペンツールを使って三角を適当に描きます。porigon1

ダイレクト選択ツールに変更して、作った三角をコピー。

porigon2

整列をさせて、2つの頂点を重ねます。

porigon3

そして形を調整して、三角形をどんどん繋いでいきます。

コピー。整列。調整。

コピー。整列。調整。

コピー。整列。調整。

コピー。整列。調整。

コピー。整列。調整。

コピー。整列。調整。

コピー。整列。調整。

コピー。整列。調整。

コピー。整列。調整。

コピー。整列。調整。

コピー。整列。調整。

コピー。整列。調整。

コピー。整列。調整。

コピー。整列。調整。

コピー。整列。調整…とこの作業をひたすら繰り返します。

porigon4

そして形が出来たら、それぞれに色をつけていきます。

porigon5

色をつけるとこんな感じ。

色をつけたレイヤーの上に白い半透明のグラデーションをかけたレイヤーを乗せるといい感じに。(ここは紹介ブログを描いていたデザイナーさんのを参考にさせて頂きました。わかりやすいブログありがとうございます。)

そして最後に、「PhotoShop」にデータを持ってきてシャドウと反射してるっぽい加工をして完成!

porigon7

まだもう少しうまくできそうですが、小さめに使うパーツなのでとりあえずここまでで止めます。

最後にまとめ

という事で今回は物販とかコンサルとかはまったく関係のないデザインのお話をしてみました。

まだまだ未熟な部分も多いので、こうゆう内容のブログを書くのはちょっと気恥ずかしくも思いますが、これをきっかけに「あ、Webデザイナーって普段こんなことを時間かけてやってるのね」って知ってもらえればいいかなーなんて思います。

また、ブログを読んでもらって「こんなの欲しいんだけど、”Ringo”こんなことはできる?」っていうお話をいただければ幸いです。

川越の方なら直接お話も出来ると思いますので、まずはWebデザインで何かあればメール・電話・チャット(サイト左下に設置)でお気軽にお声かけください!

ではまた来週!

この記事が面白い・役に立ったと思ったら、今すぐSNSでシェアしよう!

この記事はと合わせてこちらもオススメ

筆者について

Webスタッフプロフィール

Webスタッフ

WebスタッフをSNSでフォローするならこちら

ブログ全体の新着記事

No Image

新着情報&お知らせ

緊急事態宣言に伴う休業のお知らせ

No Image

新着情報&お知らせ

グループ内「BeautyFreak」のホームページをリニューアル…

No Image

INCEPTION BLOG

【2016年度】年末年始の営業に関するお知らせ

No Image

INCEPTION BLOG

残り期間わずか!!「サロンコンサル無料モニターキャンペーン」の申…

INCEPTION BLOG

事務所の外壁塗装が終わりました!

No Image

新着情報&お知らせ

残り5社となりました!!「無料コンサルティング」キャンペーン。

INCEPTION BLOG未分類の新着記事

No Image

INCEPTION BLOG

【2016年度】年末年始の営業に関するお知らせ

No Image

INCEPTION BLOG

残り期間わずか!!「サロンコンサル無料モニターキャンペーン」の申…

INCEPTION BLOG

事務所の外壁塗装が終わりました!

INCEPTION BLOG

技術と知識だけじゃダメ!接客もマスターしたアイコンサルタントの時…

INCEPTION BLOG

アイリスト、何歳まで現役を続けられる!?まつ毛エクステの施術者の…

INCEPTION BLOG

新米オーナー様に質問【自分のサロンの3年後の姿を想像できています…

ブログ全体の人気記事

INCEPTION BLOG

普段スーツを着ない僕が、川越で『オーダースーツ』を作った時の話

INCEPTION BLOG

アイリスト、何歳まで現役を続けられる!?まつ毛エクステの施術者の…

INCEPTION BLOG

技術と知識だけじゃダメ!接客もマスターしたアイコンサルタントの時…

INCEPTION BLOG

事務所の外壁塗装が終わりました!

INCEPTION BLOG

マツエクのプロも愛用!"美容大国"韓国のまつ毛美容液セット「Bi…

INCEPTION BLOG

浅草-鷲神社『酉の市』で”例のアレ”を初購入!


▲最上部へ