カテゴリー: デザイン

こんにちは、３年目デザイナーのはなです。

私は芸術大学のデザイン科を卒業しているのですが、その前は芸大受験のため画塾に通っており、デッサンや色彩構成、立体構成の勉強をしていました。

特に入試の数ヶ月前からは先生の厳しさが３倍ぐらいになって、描いては怒られ描いては怒られ毎日とにかく怒られて、泣きながら人生を呪ったりしていました。

その後私はデザイン科に進学したため、受験期のように紙に向き合いずっと絵を書くということはなくなったのですが、大学時代やデザイナーになった今でも、画塾で教わったものづくりの基礎の基礎はかなりダイレクトに役に立っています。

今回は、私が教わったことの中で今も大切にしていることをご紹介したいと思います。

描いてる最中は自分を天才だと思って描き、離れて見るときは一番嫌いな奴の絵だと思って見る

これは画塾に通い始めてすぐ、デッサンの基礎を始めたときに言われたことです。

デッサンでは、描く→離れて見る というプロセスを繰り返します。

手元で描いているだけでは作品全体のバランスを見ることができないので、２ｍか３ｍほど離れて、自分の絵が全体的に見てどうかを確認する作業が必要なのです。

デッサンを描いてる途中に、自分は駄目だと思いながら描くと、思い切った線を引いたり大胆な構図にチャレンジすることができません。

また、離れて見るときに、「ここは頑張ったところだから…」「ここは時間をかけたから…」などというバイアスがあると、自分の作品に対して正当な評価をくだせません。

作品を見る人は基本自分以外の人なのですから、自分が頑張ったところなど知らないし関係ないのです。

また、嫌いな人に対しては貶せるポイントがないか、あら捜ししがちになってしまいます。

自分の中の「頑張ったからバイアス」を消去して、作ったものに修正すべきポイントがないかあら捜しする、という姿勢はデザインをするときにもとても役に立っています。

自分の作品について説明する

これは主に色彩構成や立体構成の合評で行っていたことです。

色彩構成や立体構成では、抽象的なテーマ（浮遊とか、飛翔とか、清涼感とかなんかそういうのです）と、材料や使用色数の制限が与えられ、テーマとなったものを表現することを行っていました。

その後の合評では、「テーマをどのように解釈したか」「その解釈をどのように表現しようと思ったか」「なぜこの配置や構成にしたか」というのをみんなの前で発表させられます。

どこかに齟齬が合ったり言いよどんでしまうと厳しいツッコミが飛んできます。

「このなぜこの配置にしたの？」と聞かれて、もしそれをなんとなく適当に置いていたらうまく説明できません。

つまり、「自分の作品について説明できる」というのは、「細部に至るまできちんと言葉で説明できるぐらい意思と意図を持ってすべてを配置する」ということなのです。

実際には作品を世に出して、言葉で説明させてもらえる機会なんて殆ど無く、作品展のお客様も、Webサービスの新規ユーザー様も、ほとんどキャプションや説明書を読んでくれません。

ですが、「きちんと自分の作品について説明できるようにものを作る」という訓練によって、細部まで意思を持ってデザインを行うことができるようになりました。

まとめ

他にも言われたことはめちゃくちゃたくさんあります。

それをいつも、デザインを作っていたり、趣味で絵を描いていたりするときにフッと思い出すのです。

その度、怒られたことを思い出して背筋が伸びます。（猫背になってると、いい作品はいい姿勢から！と言われてもいました…）

怒られすぎて人生呪ってたしストレスでめっちゃ太ったけど、なんだかんだ、あ〜画塾行っててよかったな〜と今でも思います。

もう一回受験時代やり直せって言われたら、絶っっっ対、嫌ですけどね！

ちなみに、この記事のトップの画像は、画塾の科目で私が一番好きだったアクリル画で、褒められたやつです。ちゃんと褒められるときは褒められていましたよ…

Craftとは

Craftとは、inVISIONが提供するSketchとPhotoshop用の無料プライグインです。

SketchでUIデザインするときに便利な機能がたくさんあります！

Craftのダウンロードとインストール

トップページにメールアドレスを入力し、「GET CRAFT NOW」をクリックしてプラグインをダウンロードします。

ダウンロードしたファイル「CraftManager.zip」を解凍し、アプリケーションフォルダに移動します。Craftを起動するとMacのメニューバーにアイコンが表示されます。

追加されたアイコンをクリックし、進めていくとスケッチ用プラグインのインストール画面が表示されます。「install」をクリックしてプラグインをインストールしましょう。

インストールが完了するとSketchにメニューが追加されます。

画像やテキストの流し込み

Dataパネルを使って、画像やテキストの流し込みをしてみましょう。

①Dataパネルを開きます

②Photosを選択

③新しい画像を使う場合、開いてるブロックをクリックします。

④アイテム名や使う写真のディレクトリを選択します。

準備が整いましたので、画像を挿入したいところをクリックして、Dataパネルを使ってみるとどうなるか見てみましょう。

画像があっという間に追加されましたね。

テキストも「Type」から同様に追加できます。

コンテンツの複製

デザインを作る上で同じものが並ぶ場合はありますよね。

duplicate（複製）パネルを使って、画像やテキストの流し込みをしてみましょう。

複製したい方向のフォームに複製したい「数」と「間隔」を入力します。

青いボタンを押すと複製されます。

もしも、コンテンツ素材があらかじめ用意されている場合は、先に「画像やテキストの流し込み」で利用した「Data」パネルを利用しましょう。

あらかじめ「Data」パネルから素材を流し込んでいると、ランダムに画像とテキストが挿入されます！

あっという間にコンテンツが複製されましたね。

Craftには、プロトタイプ作成など他にも様々な便利な機能がありますので、改めて紹介したいと思います。

こんにちは、三年目デザイナーのはなです。

私は洗練されたミニマルでシンプルなデザインも好きですが、どちらかというと装飾をワイワイたくさん置いた華やかなデザインの方が好きです。

今回はそんなワイワイしたデザインを作るときに欠かせない、バランスの良いオブジェクトのランダム配置のやり方についてお話します。

オブジェクトの準備

まず、オブジェクトを大まかに、大・中・小に分けます。

「大」は主役、もしくは準主役です。

真ん中にタイトルなどが来る場合はそれが主役になるので、「大」のオブジェクトは準主役になります。タイトルなどがない場合（イラストなどだけをランダム配置する場合）は主役になります。

基本的には一つの画面に1個か2個だけ置きます。

「中」は脇役です。

主役よりも色や書き込みの量に少し差をつけるとなお良いです。

画面の大きさやバランスによりますが、主役より多く、3～5個ほど置くと良いと思います。

「小」はモブです。

画面の賑やかしです。

主役と脇役を配置したあと、余白に置いていきます。

置く数は画面の広さで大幅に変わります。脇役の数より多いこともあれば、少ないこともあります。

オブジェクトの配置

「大」「中」「小」の順に配置していきます。

まず「大」を配置します。

大胆に画面からはみ出るぐらい置くとダイナミックさが出ていいと思います。

2つ以上置く場合は一箇所に固まりすぎないように気をつけ、角度に差をつけます。　

次に「中」を、「大」の間に置いていきます。

こちらも、近くにある「中」同士が似た角度にならないように気をつけます。

最後に「小」を、余った部分に入れていきます。

「小」と「すこし小さめの小」を作って一緒に配置していくとよりランダム感が出ます。

配置の良い例・悪い例

こちらが配置の良い例です。

そしてこちらがあまり良くない例です。

よりいいバランスのランダム配置にするには、下記のポイントに気をつけましょう。

・余白が均等に空きすぎている

タイトルの目立ち感が少ないですね。

また、オブジェクト同士の余白がだいたい同じぐらい空いていて、スカスカしているように見えます。

「粗」（空いているところ）と、「密」（詰まっているところ）が生まれるように配置しましょう。

また、主役の周りは「疎」にすると主役をより目立たせることができます。

・似た要素を似た角度で置かない

「大 A」「大 B」の角度が似ています。

また、「中 a」と「中 B」の角度も似ていますね。

ランダム配置の場合に似た要素が似た角度になると「何らかの意味」があるように感じられて不自然になります。

角度はばらばらになるようにしましょう。

・「触れるか触れないか」はやめる

「大 A」の下、「小」が触れるか触れないかの場所に置いてあります。

この、「触れるか触れないか」というのも「何らかの意味」を生みます。

ちゃんと離すか、ちゃんと重ねるかどちらかにしましょう。

ランダム配置は、「おもちゃ箱を投げたときにおもちゃが床に散らばる感じ」をイメージします。

同じ形のおもちゃが全く同じ角度になる確率はとても低いだろうし、おもちゃとおもちゃの隙間が全部均等になることなんて多分ありませんよね。

作成したランダム配置に沿って、お花を置いてみました。

華やかで可愛い感じにできたと思います！

まとめ

ランダム配置は何度も作っていると、なんとなく感覚でできるようになってきます。

それまでは、

他人に見せる→バランスが悪いと思うところを指摘してもらう

というのを繰り返すといいと思います。

少し休憩を挟んだり、離して見てみたりするのも有効な手です。

1人で作っているとなんだかよくわからなくなってくるので…

（私もしょっちゅうなんだかよくわからなくなっています）

この世に私好みの可愛くてワイワイしたデザインが一つでも増えるといいなと思っていますので、みなさんもどんどんランダム配置を使ったデザインを作ってくださいね〜！（強欲）

こんにちは。デザイナーのMです。
最近というかここ数年、デザイン作業をする際は、ほぼほぼSketchに置き換わっております💻
https://www.sketch.com
バージョンも日々アップデートされており、どんどん使いやすくなっていっています。
今回はそんなSketchの便利機能の一つ、「シンボル機能」をご紹介したいと思います。

シンボル機能とは

ketch上でUIパーツやオブジェクトを一括管理するための機能です👽

アプリのデザインをする際、ナビゲーションバーや共通ボタンなど共通で使いまわしたいUIパーツが出てくると思います。
もしそのパーツ全てに修正が入った場合、UIパーツを一つ一つ変更しないといけなくなり、時間がかかる上に修正漏れなどが発生しがちになります😩
そこでシンボル化です！

UIパーツをシンボルにすれば、そのパーツを修正するだけでデザイン上の全てのパーツを一発で変更することができます。
それでは簡単ですがシンボル化のやり方をご説明します💁

1.オブジェクトからシンボル化する

シンボル化するには、シンボルにしたいオブジェクトを選択して、”右クリック > Create Symbol“を選択するだけです。

2. シンボルページでシンボルを管理

シンボル化されたパーツは、Sketch画面の左上にある”PAGES > Symbols“で管理します。

このように作成したシンボルを管理できます。

3. シンボルの使い方

デザインページに戻り、シンボルと同じサイズのオブジェクトを作成します。

そのオブジェクトを選択して、”右クリック > Replace With > 作成したシンボル名“をクリックすればシンボルをデザイン上に設置することができます🙌

4. 一気にパーツを修正！

最後にシンボルを変更して一気にパーツを変更してみましょう😎

シンボル管理ページに戻り、変更したいシンボルを選択して修正します。
修正するとデザインページ上に設置したパーツもリアルタイムで置き換わります。最初できたときちょっと感動しましたw

シンボルページでシンボルの色を変えると…

デザインページにもすぐに反映🙌
このパーツを色んな所で使用しているデザインの場合、デザイン修正がこの作業だけで完了します。あとは書き出すだけ！

デザインを効率化しよう🚀🚀

というような感じで、シンボル機能はSketchを使用してアプリのデザインをする際にとても重宝する機能です！

使い方はとても簡単なのでぜひチャレンジして効率的にデザインをしてみてください〜👍

WordPressでお知らせや商品一覧などデフォルトで用意されている投稿とは別に、独立したコンテンツを投稿したい場合ってありますよね。
そんなときは、カスタム投稿タイプを使って投稿ページを増やしましょう！

①管理画面にカスタム投稿の追加

「functions.php」に下記のコードを追加します。

add_action( 'init', 'add_post_type' );
function add_post_type() {

  // 「ニュース」のカスタム投稿タイプ
  register_post_type(
    'news', /* 投稿タイプ名 */
    array(
      'labels' => array( // 投稿タイプの名前を定義
        'name'          => 'ニュース', // 管理画面などの表示名
        'singular_name' => 'ニュース', // 管理画面などの表示名（単数形）
        'add_new_item'  => '新規追加', // 新規追加画面の表示名
        'edit_item'     => '編集', // 編集画面の表示名
      ),
      'public'          => true, // trueで管理画面等に表示
      'hierarchical'    => true, // trueで階層型
      'has_archive'     => true, // trueでアーカイブページ（一覧表示）を持つ
      'supports' => array( // カスタム投稿ページに表示される項目
        'title', // タイトル
        'editor', // 本文のエディタ
        'author', // 作成者
        'thumbnail', // アイキャッチ画像
        'excerpt', // 抜粋
        'trackbacks', // トラックバック送信
        'custom-fields', // カスタムフィールド
        'revisions', // リビジョン
        'comments', // ディスカッション
        'page-attributes', // 属性（親・順序）
      ),
      'menu_position'   => 5, // 左メニュー「投稿」の下に表示
      'rewrite' => array('with_front' => false), // パーマリンクの編集（newsの前の階層URLを消して表示）
    )
  );
}

「functions.php」にコードを追加すると左メニューに「ニュース」が追加されます。

※ 不要なフォームがある場合は、「supports」の中の不要な値を削除してください。
※ 表示位置をもっと下にしたい場合は、menu_positionの値を増やしてください。
（例えばメディアの下に持っていきたい場合はmenu_positionの値を10にします。）

②カスタム投稿タイプの表示方法テンプレートの用意

次に記事表示用のテンプレート「single-news.php」を作成します。
ファイル名single-news.phpの「news」の部分は、function.phpに追記した「投稿タイプ名」と同じにします。
（single-news.phpがない場合はsingle.phpを使って表示されます。）

③パーマリンクの保存

「設定>パーマリンク設定」で内容を変更せずに、「保存」ボタンをクリックします。
（パーマリンク設定で保存をしないとエラーページが表示されます。）

「ニュース」で投稿した記事のURLにアクセスすると投稿した内容が表示されていると思います。

やってみると意外と簡単にカスタム投稿タイプが追加出来たのではないでしょうか？
こういう所から少しずつWordPressと親しくなれたらと思います。