カテゴリー: デザイン

シンボルを使って効率的にデザインしよう!

こんにちは。デザイナーの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に追加する方法(プラグイン不要!)

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と親しくなれたらと思います。

 


超初心者デザイナーがStoryboardを使ってみてよかったなと思ったこと

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

私はドドド文系かつ、今のところ人生でパソコン使ってる時間より紙と絵の具触っていた時間のほうが長いようなアナログ街出身の感覚派ですが、この度「デザイナーさんがStoryboardでアプリUI作ってくれたらすごく楽」というエンジニアさんの言葉により、XcodeのStoryboardを使ってみることになりました。

もちろん私の経験値はそのような状況(かろうじてHTMLとCSSはわかる…)ですので、傍から見ると低い段差に躓きまくりました。

それでもなんとかエンジニアさんからの介護を受けて、アプリのガワだけ作成することができ、「何このソフト…?英語しか書いてない…怖いよ~…」という状況からは脱しました。

こういうかたちのボタンはこういうふうに作れば良いんだよ、というのを理解するのに丸一日かかったりしました。

このボタン一つを苦戦しながら作って、どの画面サイズで見ても破綻していなかったときはとても感動したりしました。

あまりにも初歩的すぎますが、レベルが赤子なので見るものすべてに感動してしまうんですね。

Storyboardできる人は、まあ、一笑に付していただけると幸いです。

Storyboardを使ってみてよかったなと思ったこと

あとからエンジニアさんに細かいデザイン調整のお願いをしに行かなくて済む!

「すみません、ここなんですけど、あと10pxぐらい余白つめてもらっていいですか…」がなくなりました。

全部自分でつけてますからね。

「ここはシステム上これ以上余白詰めるのは難しいです」「そこをなんとか」という工程もなくなりました。

システム上難しいということを踏まえた上でデザインを作ればいいのです。

それが理解できるようになったことは、すごく大きな収穫だったなと思います。

画面の大きさによってどのようにレスポンシブさせるか自分で決められる!

例えばiPhone8の画面サイズで作ったUIデザインについて、5sの時はどこをどういうふうに縮める?iPhoneXやiPadの時はどこをどうやって伸ばす?というのを自分で決められます。

あとからエンジニアさんにお願いして変えてもらうとなると、下手したらAuto Layout付け直しじゃないですか(それも理解できるようになりました。そりゃ面倒くさいですね)

それを最初から自分で指定できるというのは、かなり効率がいいです。妥協もしないで済みます。

標準的なiosアプリのデザインがなんとなくつかめるような気がする!

Storyboardにはiosアプリの標準UIのパーツが元から入っています。

ドラッグするだけで置けます。すごい便利ですね。

逆に、「置けない場所」というのもなんとなくつかめてきます。

そうやって試行錯誤しているうちに、iOSアプリの標準的なデザインが、なんとなくわかってきたような気がします。

まとめ

 Storyboardを触ってみて、「デザイナーさんがStoryboardでアプリUI作ってくれたらすごく楽」という言葉の意味がわかりました。

見た目の微調整が自分で行えるということの素晴らしさを、デザイナーさんなら理解できると思います…

とはいえ、まだ入り口に立った段階ですので、これからも四苦八苦しながらStoryboardくんと仲良くやっていけるよう頑張りたいと思います。


高品質デザインツール Canvaを使ってみた。

こんにちは。デザイナーのMです。
今回は無料で美しいグラフィックデザインを作成することができる「Canva」というサービスを使ってみました。

Canvaとは?

CanvaはPCブラウザ、アプリ(iOS/Android)で利用できる、無料グラフィックデザインツールです。

グラフィックデザインを無料で簡単作成 – Canva
https://www.canva.com/ja_jp/

豊富なテンプレートから用途にあったデザインを選んで、カスタマイズするだけで高品質なグラフィックデザインを誰でも簡単に作ることができます。

わかりやすいホーム画面

登録すると最初に表示されるホーム画面です。
・デザインを作成
・あなたのデザイン(作成済みのデザインがある場合のみ表示)
というシンプルなダッシュボードで、とてもわかりやすいです。

デザインテンプレートも
・ソーシャルメディア
・Instagramの投稿

などの各種SNSに対応した最新のテンプレートから、
・店舗のメニュー表
・パンフレット
・商品券
などの印刷物のデザインテンプレートまであって種類がとても豊富です。

今回はこのブログ記事のヘッダー画像を作成してみながら、Canvaを使ってみようと思います。
※記事中のスクリーンショットがPCブラウザのものになるので、アプリ版とは多少違う部分があるかもしれません。ご了承ください。

デザインを作ってみる

それでは早速ですが、テンプレートからデザインを作ってみようと思います。
ホーム画面のテンプレート一覧から「Blogバナー」をクリックします。

ブログで一般的に使用されるサイズで真っ白なアートボードが表示されました。
画面左側に、メニューとデザインテンプレートが表示されています。右下に(無料)と書いてあるものは無料で利用できます。
それ以外もデザインの背景にCanvaロゴの透かしが入りますが利用することができます。この透かしは有料で削除することも可能です。

今回は無料のテンプレートを選んでみました。

このままでも普通に利用できるオシャレなテンプレートになっています。
このテンプレート上の文字をクリックするとすぐに編集することができます。

多数のフォントや文字色の変更もツールバーからすぐに変更することができます。非常に直感的で初心者の方でも使いやすいのではないかと思います。

背景画像も豊富な素材が用意されていて自由に差し替えることも可能です。自分の持っている画像を挿入することもできます。
また簡単な写真フィルターなども用意されており、ちょっとした画像編集も可能になっています。
フォントの組み合わせもデザイナー顔負けの色んなパターンが用意されているので、どれにしようか悩むのもいいかもしれません。

あっという間にバナーの完成!

数クリックでバナーが出来てしまいました。時間にして5分もかからなかったと思います。
作成したデザインは、pngやjpg、PDFでダウンロードすることができます。
いつもはIllustratorやPhotoshopでデザインを作成していますが、簡単なデザインラフや今回のブログなどで利用する記事内の画像などはCanvaで作るのでも十分かもしれません。


また機会があれば、ぜひ使ってみようと思うことのできるサービスでした^^

グラフィックデザインを無料で簡単作成 – Canva
https://www.canva.com/ja_jp/


CSSで字詰めの調整をしよう!

デザインをする上で字詰めって大事ですよね。
でもWebページのテキストは、ブラウザの仕様で調整出来ないから諦めていたり…。
そんなことはないでしょうか?

字詰め

実は、CSSに字詰めのプロパティ「font-feature-settings」があります。
使い方は簡単で、「font-feature-settings : “palt”;」を指定するだけです。

    .kerning_sample{
        font-feature-settings : "palt";
    }

注)メイリオは、プロポーショナルメトリクスを含まないため変わりません。

 
例えばデフォルトだとこのような表示だったのが

デフォルト
カーニングとは、文字同士の間隔(アキ)を調整する技法のこと

 
font-feature-settings:”palt”;の指定をすると全体が引き締まった感じになります。

font-feature-settings:”palt”;の指定
カーニングとは、文字同士の間隔(アキ)を調整する技法のこと

 
場合によっては窮屈な感じがするので、「letter-spacing」を使って調整しましょう。

    .kerning_sample.spacing_sample{
        font-feature-settings : "palt";
        letter-spacing:2px
    }
font-feature-settings:”palt”;とletter-spacingの指定
カーニングとは、文字同士の間隔(アキ)を調整する技法のこと

デフォルトと比べて、カッコや句読点の間などが整ってると思います。
各ブラウザの対応もいつの間にか整っていました。
各ブラウザの対応状況

両端揃え

字詰めのプロパティ「font-feature-settings」を使ってブログの本文や説明文などの右端がガタついて気になった場合は、「text-align:justify;」を使ってみるのもいいかもしれません。
デフォルトだと右端がガタついていますが。

デフォルト
カーニング(英語: kerning)とは、主に欧文の組版において、プロポーショナルフォントの文字同士の間隔(アキ)を調整する技法のこと。カーニングを行わない場合は文字の間に不自然な空白を招いてしまう一方、適切にカーニングが施されたフォントでは字面間の空白の面積はほぼ均等になる。
DTPが普及した現在は組版ソフト上で行われることが多いが、以前は活字に特殊な処理を行うか、切り貼りによる文字詰め(もじつめ)と読ばれる作業が必要であった[1]。現在ではこの語や詰め文字(つめもじ)という語をカーニングの訳語として用いることもあるが[2]、カーニングと文字詰めを厳密に区別することもある[注 1]。英語では、活字を加工する工程の呼び名から派生して mortising と呼ばれることもある(原義:くり抜くこと、ほぞ穴を開けること)[4]。
引用 – Wikipedia

 
「text-align:justify;」を使うと右端がそろうと思います。

text-align:justify;とfont-feature-settings:”palt”;の指定
カーニング(英語: kerning)とは、主に欧文の組版において、プロポーショナルフォントの文字同士の間隔(アキ)を調整する技法のこと。カーニングを行わない場合は文字の間に不自然な空白を招いてしまう一方、適切にカーニングが施されたフォントでは字面間の空白の面積はほぼ均等になる。
DTPが普及した現在は組版ソフト上で行われることが多いが、以前は活字に特殊な処理を行うか、切り貼りによる文字詰め(もじつめ)と読ばれる作業が必要であった[1]。現在ではこの語や詰め文字(つめもじ)という語をカーニングの訳語として用いることもあるが[2]、カーニングと文字詰めを厳密に区別することもある[注 1]。英語では、活字を加工する工程の呼び名から派生して mortising と呼ばれることもある(原義:くり抜くこと、ほぞ穴を開けること)[4]。
引用 – Wikipedia

 
毎回、字詰めの調整や確認は大変ですが、この方法だと以外に簡単にできるかもしれません。
Webコンテンツを作る際に役立てていただければ幸いです。