アラサー主婦のWEBデザイン奮闘記

Webデザイン Web制作 制作お役立ち

ベジェ曲線を学べるサイト「Shape Type」

投稿日:

前回ご紹介したカーニングを練習できるサイト「Kern Type」。このサイトを作ったMethod of Actionから、ベジェ曲線を学べるサイト「Shape Type」も登場しているんです。

以前よりはベジェを使えるようにはなってきたものの、まだまだ扱いに慣れていないところがあるので、こういったゲーム感覚で学べるサイトの存在はとてもありがたいです。

では、早速ですが簡単にその使い方についてご紹介していきますね。

 

「Shape Type」の使い方

まず最初はチュートリアルが表示されるので、ピンクの点を正しい位置に移動させて終了させます。

 

その後から、お題が10問出題されます。

お題のフォントの崩れた部分を、ピンクの丸い点をドラッグして正しい形に調整していきます。

後半になるにつれてお題の難易度もアップしますよ〜。

 

これでOKかな〜と思ったところで、「Compare」をクリック!すると%で採点されます。

…47点でした。やっぱりまだまだ練習が必要です。。

「Kern Type」と同様、「Both letters」にチェックを入れると正解と比較して見ることができます!

  

 

こんな流れで10問すべてを終了すると最終スコアが表示されるのですが、そのスコアをTwitterで共有することもできるようです。

ちなみにiPhoneやiPadなどのタッチ操作にも対応しているそうなので、ちょっとした空き時間などにも手軽に楽しむことができると思います。

デザイナーの方は是非一度、腕試しに挑戦されてみてはいかがでしょうか…?

 

-Webデザイン, Web制作, 制作お役立ち

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

【Webデザインおすすめ書籍】やってはいけないデザイン

今日はデザインの勉強を始めたばかりの方や、駆け出しのデザイナーさんにおすすめの書籍をご紹介します。   やってはいけないデザイン     こちらの本はノンデザイナー向けのデザイン入門書で、難しい専門用 …

デスクトップやWeb上の画面から色を簡単に抽出する方法

デザイン制作時に参考サイトから色を抽出したい時、皆さんはいつもどうしていますか? 私は初めの頃、参考をキャプチャ→保存→Illustrator・Photoshopで開いて色を抽出、という流れでやってい …

作業がはかどる!オススメのGoogle Chrome拡張機能5選

こんにちは、ぶちこです。 いきなりですが、みなさんはGoogle Chromeの拡張機能、使いこなしていますか? 私は今までScreen Captureくらいしか拡張機能は使っていなかったのですが、他 …

Google Chromeでスマホ表示の確認をする方法

スマホでの表示を確認したい時、わざわざスマホを出して検索して…とやっていると結構面倒ですよね。 そんな時は、Google Chromeを使うとパソコンで簡単にスマホの表示を確認することができるんです。 …

ファビコン制作で参考になるサイト

タブやお気に入りなどで、横に小さくに表示されるファビコンですが、サイズが小さい故に意外とデザインも難しいですよね。。 それでも、ウェブサイトのシンボル、そしてユーザーにウェブサイトを印象付けるための重 …