WordPressでGutenbergを利用している際、カスタム投稿をfunction.phpあるいはプラグインで追加している場合、カテゴリー一覧が表示されないケースがあります。
表示がされていなかった場合の対処法を記載します。

Gutenbergについてはこちら。

function.phpでカスタム投稿を実装している場合

// カスタム投稿タイプの作成
function create_posttype() {
    register_post_type( 'カスタム投稿名：ラベル',
        array(
            'labels'          => array(
                'all_items'          => '一覧を表示',
                'name'               => 'カスタム投稿名',
                'singular_name'      => 'カスタム投稿名',
                'menu_name'          => 'カスタム投稿名',
                'add_new'            => '新規追加',
                'add_new_item'       => 'カスタム投稿名を追加',
                'edit'               => '編集',
                'edit_item'          => 'カスタム投稿名の編集',
                'view'               => '表示',
                'view_item'          => 'カスタム投稿名を表示',
                'search_items'       => 'カスタム投稿名の検索',
                'not_found'          => '見つかりません',
                'not_found_in_trash' => 'ゴミ箱にはありません',
                'parent'             => '親',
            ),
            'description'     => '',
            'show_ui'         => true,
            'show_in_menu'    => true,
            'capadility_type' => 'post',
            'hierarchical'    => false,
            'rewrite'         => true,
            'query_var'       => true,
            'has_archive'     => true,
            'public'          => false,
            'supports'        => array( 'title','editor','thumbnail' ),
            'menu_position'   => 2,
            'show_in_rest' => true,　//ここ
        )
    );
    // カスタムタクソノミーの追加
    register_taxonomy(
        'カスタムタクソノミー名',
        '適応するカスタム投稿',//（複数の場合は array('カスタム投稿名A','カスタム投稿名B')
        array(
            'hierarchical'   => true,
            'label'          => array(
                'name' => 'カスタムタクソノミー名',
                'add_new_item' => 'カスタムタクソノミー名を追加',
                'edit_item' => 'カスタムタクソノミー名の編集',
            ),
            'show_ui'        => true,
            'query_var'      => true,
            'rewrite'        => true,
            'singular_label' => 'カスタムタクソノミー'
            'show_in_rest' => true, //ここ
        )
    );
}
  
// 読み込み
add_action( 'init', 'create_posttype' );

プラグイン「Custom Post Type UI」でカスタム投稿を実装している場合

投稿タイプの「設定」にある以下にチェック

タクソノミー編集の「設定」にある以下にチェック

show_in_rest　や　REST APIとは？

WP REST APIとは、WordPress の投稿 API、メタデータAPI、ユーザー APIなどにアクセスする WP Query のシンプルなインターフェースです。
利用すると、Wordpressで作成した投稿や、各データにアクセス可能になります。

GutenbergはカテゴリーやタクソノミーをこのREST APIから取得しているようです。表示させたい場合はきちんと設定しましょう。

Gutenbergは慣れたらとても使い易いエディタです。積極的に使っていきましょう！

この記事であなたの課題を解決することができましたか？

疑問点があったり、解決できなかったことがありましたら、お気軽にご相談してください。

構造化データは慣れるまで作成するのがちょっと面倒なものです。

参考記事

簡単に作れるツールがあったのでご紹介。

構造化データの種類

構造化データをホームページに挿入する理由の一つに、リッチリザルトの表示があります。
リッチリザルトというのはこういう表示。

リッチリザルトの表示にはいくつか種類があり、現在代表的なもので以下のようなものがあります。

記事

パンくずリスト

企業の連絡先

更に詳しく　＞　検索ギャラリーを使ってみる
構造化データにはいくつか種類があり、上記ページから「使ってみる」＞「マークアップを参照」で例を見ることが出来ます。

WEBサイトの基本となるローカルビジネスの構造化データ生成ツール

上記のマークアップは理解するまでに時間がかかる場合が多くあります。
現在、無料で利用できる「企業に関するリッチリザルト」に大きく作用する構造化データを、以下で生成することが出来ます。

まめわざ　｜　無料ホームページ作成　クラウドサービスまめわざ

ローカルビジネスの構造化データ生成ツールの使い方

表示されているフォームに情報を入力するだけで作成可能です。

「タイプ」は各業種ごとに分かれているので、適切なものを選びましょう。「名称」には企業名などがはいります。
すべて入力し終わったらフォーム下部にある「コードを取得」を押します。
以下のようなコードが取得できます。

なお、支店がある場合は、この情報を追加することもできます。「支店を追加」ボタンを押して情報を入力しましょう。

その他構造化データの自動生成はこちら

Schema Markup Generator (JSON-LD)

海外サイトなので英語表記ですが、難しくはありません。Googleの翻訳機能などを利用すると、出力されるコードが乱れるので、なるべく原文で行いましょう。

ドロップダウンでどの構造化データを作るのかを決めます。
「Local Business」と「Organization」はよく使いますので覚えておくといいでしょう。

海外と日本では住所の書き方が大幅に異なるので、住所だけはこちらではなくまめわざ様のジェネレーターを使うのがいいかもしれません。
記事やパンくずリストの構造化データは、こちらを利用するとスムーズです。

構造化データはSiriやアレクサといった音声ツールにも貴重な情報を含みます。積極的に使っていきましょう！

この記事であなたの課題を解決することができましたか？

疑問点があったり、解決できなかったことがありましたら、お気軽にご相談してください。

グーグルが2019年4月2日でスマートフォンアプリケーションの「Inbox」のサービス提供を終了しました。
使い勝手がよく、弊社でも愛用していた社員が多いのですが、機能の大半はGmailに統合されたようです。なので、Inboxを利用していたユーザーは、Gmailに戻るのがいいのではないかという意見が大半です。

Gmailのお役立ち機能・スヌーズ　…「また後日表示して！」必要なタイミングで指定したメールが上部に

例えば、日付の切られた会議があって、その会議の詳細が添付されたメールがあるとします。
当然スターをつけておけばより分けられるのですが、「その日にまたメール内容を確認したいな……」などと思った場合は、このスヌーズ機能が便利です。日付指定のアラームですね。

パソコン

メールを開くと上部にアイコンが設置されます。

スマートフォン

スヌーズしたいメールを開きます。
右上のメニューを開き、「スヌーズ」をクリックします。
日時などを指定します。

Gmailのお役立ち機能・スマートリプライ　…AIで返信内容を選択。使えば使うほど学習する！

「承知しました」「ありがとう」「了解です」といったシンプルな内容を、メールの返信として1クリック、１タップで処理することができる機能です。
あんまり日本人にはなじみがない返信の仕方ですが、海外では「お世話になります」から始まる長ったらしいメールは文化圏ではありません。シンプルで個人的には使っていきたい機能なのですが、なんだか「失礼だ」とか言われてしまいそうですね。

ボタンになっているテキストをクリックするだけで、返信メールが展開するので、続けて何かメッセージを書くこともできます。選択する内容によっては、どんどんこちらを学習してくれるので、より適切なメール返信ができるようになります。

この機能をオフするには、メニューで設定する必要があります。

パソコン　「全般＞スマートリプライ」

スマートフォン　「メニュー＞設定＞（アカウント選択）＞スマートリプライ」

Gmailのお役立ち機能・情報保護モード　…メールを送信するときに転送・コピーペースト・DL・印刷を不可能に。

情報保護モードには以下の機能があります。

• 有効期限を過ぎたあとは自動でメールが消滅します。
• 転送・コピーペースト・DL・印刷は不可能に。添付ファイルはタブで閲覧、DL不可
• SMSパスコード設定可。利用しないこともできます。

Gmailの送信先でない場合、同じメールアドレスにパスコードが別途送信されることによって、情報を守ります。

Gmailの自動振り分けは「フォルダじゃなくてラベル」！

メニューからラベルの種類をふやすことによって、フォルダ機能のように扱うことができます。フォルダ機能と何が違うのか、というと、1つのメールに対し、複数のラベルを指定することができる、という点で大きく異なります。
ラベルには色を付けることができ、階層化することも可能です。連番にすることで上から順番をコントロールできます。

このラベルにフィルター機能を利用すると、自動振り分けが可能です。
フィルターは「設定＞フィルタとブロック中のアドレス」から設定することができます。

Gmailの表示のカスタマイズ：マルチ受信トレイ

「設定＞設定詳細＞マルチ受信トレイ」の表示をオンにすることでマルチ受信トレイが使用できます。

マルチ受信トレイとは、自分が利用したい項目で分けたメールを表示する機能で、下書きやスター付き、またラベルごとなどでもメイン画面にメール一覧を表示することができます。

使えそうな検索は以下を参照。
https://support.google.com/mail/answer/7190?hl=ja

なお、「ソーシャル」や「プロモーション」といったタブが表示されている場合、マルチ受信トレイが表示されないケースがあるようです。
その場合は「設定＞受信トレイ」から上記二つのチェックを外しましょう。

自分の使い易いようにカスタマイズして利用していきましょう！

この記事であなたの課題を解決することができましたか？

疑問点があったり、解決できなかったことがありましたら、お気軽にご相談してください。

ShowMoreはデスクトップ画面の任意の範囲またはフルスクリーンを録画できるソフトです。
AdobePhotoshopやAdobeIllustratorのチュートリアルや説明をするときに、ちょっとした動画が撮影できるので重宝しています。

https://showmore.com/jp/

ソフト紹介ページはこちら。

無料動画録画ソフトShowMore、無料でも幅広い録画が可能。

以下のようになっています。

無料会員

無料
動画ホスティングストレージ試用可能

一般会員

年間520円
週に5GBの通信可
50GBの動画ホスティングストレージ利用可能

高級会員

年間640円（フェア中！）
週に20GBの通信可
150GBの動画ホスティングストレージ利用可能
3名のチームメンバーと動画共有化

プロ会員

年間970円
週に100GBの通信可
500GBの動画ホスティングストレージ利用可能
10名のチームメンバーと動画共有化

無料会員の場合、ストレージの利用は「試用」になり、実際には長期間利用することはできないようです。
とはいえ、保存先をローカルにしてしまえばいいので、ただパソコン画面を録画したい、というだけでしたら、そんなに問題はありません。

オンライン利用orアプリケーション使用は選択可能

オンライン利用の場合

録画開始ボタンを押すと、ランチャーのダウンロードが始まります。

起動すると、ランチャーがインストールされて、自動的に赤い枠が出てきます。

アプリケーション利用の場合

アプリケーションを利用ボタンを押すと、ダウンロードが始まります。

利用規約が出てくるので「同意する」にチェックを入れた状態で「次に」をクリックします。
ソフトの保存先、アイコンの設置などの項目を自分のしたいようにカスタマイズしていくと、インストールとセットアップが自動で始まります。

Windowsの場合は大概ここに出てきます。

画面の説明と録画の仕方

録画のオプションで選べる動画フォーマットは以下の通りです。

MP4/MWV/AVI/MOV/FLV/MPEG/VOB/ASF/TS

録画開始ボタンを押すと、カウントダウン後に録画が開始されます。

画面上に途中で文字を描いたり線を引いたり、簡易な図形を描くことが出来ます。

消しゴムボタンを押すと、全ての要素を一括で消すことができます。

録画停止ボタンを押すと、ちらりと広告が出てきますが、右上のバツボタンを押して消しておきましょう。
最終的に録画する動画が再生されます。右下のボタンで保存が可能です。
なお、VIP版にすると右上の透かしが消えます。（前のバージョンだと透かしは入らなかったのですが、新しいバージョンだと入るようですね）

こんなふうな動画になります。

新バージョンではGIFでの書き出しが出来なくなった模様……。

このGIFの書き出しがしたくてDLしたのですが、新バージョンではどうやらGIFの書き出しができなくなっているようです。需要は少なくなりましたが。残念です……。GIFで書き出しできるアプリケーションを探さないと……。

チュートリアルなども簡単にできますので、活用していきたいですね。

この記事であなたの課題を解決することができましたか？

疑問点があったり、解決できなかったことがありましたら、お気軽にご相談してください。

「フレスコ」というのは絵画技本の一つで、生乾きの漆喰の上に顔料などで描くことで、フレスコ画というのはそういった壁画の事。有名どころで言うとミケランジェロの最後の審判などです。書き直しのできない緻密な技術が必要とされる技法で、主には建築物に描かれているものが大半です。
そのフレスコの名前をとった「Adobe Fresco」、もともとは「Project Gemini」と呼ばれる開発されていたアプリです。
PhotoshopのペインティングとIllustratorのドローイングが合わさったアプリなので、双子の意味合いをもつプロジェクト名だったのでしょうか。

Adobe Fresco

Adobe Frescoは油彩や水彩の表現のほか、Illustrator特有のベクターも利用可能

キャンバス上で色を混ぜることができるようで、油彩、水彩の表現は秀逸です。水彩の水を加えた時のにじみまでよく表現できます。Photoshopで利用していたブラシを引き継ぐことも可能。レイヤー、マスク機能の搭載も可能。PhotoshopやIllustratorでよく見かけられた「これがあると便利」という基本的なシステムは組み込まれているとみていいでしょう。

フィードバック募集中

Eメールアドレスと作業環境を送信することで、プレリリーステストに参加することが出来るようです。
アプリは2019年後半、iPadからリリース予定のようです。

AdobeFrescoで描かれた様々な作品

Our Upcoming Drawing and Painting App has a New Name: Adobe Fresco
Behance： Adobe Fresco
Instagram：adobedrawing　（利用アプリを確認してください）

見る限り、かなり大きく描画作品の範囲は広がるとみていいでしょう。こうなってしまうとやはりiPadにApplePencilが欲しくなってしまいますね。
デバイスもアプリも日々更新を続けています。乗り遅れないようにしたいですね！

この記事であなたの課題を解決することができましたか？

疑問点があったり、解決できなかったことがありましたら、お気軽にご相談してください。

NVIDIA Corporationはアメリカ合衆国カリフォルニア州にある半導体メーカー。主にはコンピューターグラフィック関連のユニットを開発して販売しており、様々な方面で利用されています。

NVIDIA Corporation

研究も盛んでなようで、今回ちょっと面白いAIが発表されたので遊んでみました。

NVIDIA AI PLAYGROUND　GauGANで自動生成するアートイメージ

NVIDIA AI PLAYGROUND

簡単なストロークと色味だけでオートマチックにイラストを生成することが出来ます。

使い方は簡単。

1. 上記URLのページから「LAUNCH INTERACTIVE DEMO」をクリックし、画面下部にある利用規約を読んで、チェックを入れる。
2. 左の項目から好きなオブジェクトを選択し、左のキャンバスに自由に描き込む。
3. 真ん中の矢印をクリックし、しばらく待機
4. 画像が生成される

こんな芸術的な雰囲気も作成可能です。

GPU（Graphics Processing Unit）は「数値を計算する能力」

「絵なんか自動生成されて何になるの？」と思う方もいらっしゃるかと思いますが、「絵」が自動生成されることがすごいのではなくて、絵が「自動生成」されることがすごいのですね。

例えば私たちがパソコンで絵を描くとき、そこにあるのは膨大なピクセルデータですが、私たちはこれを一つ一つ手作業でデジタルのキャンバスに置いていきます。
この手作業で行っているデータの入力作業が全部自動になる、ということは、つまり工場でお菓子を自動的に大量生産していることとあまり変わりがありません。デジタルのなかで色とは16進法で表され、それらはすべてX軸とY軸とたまにZ軸で定義されます。
我々が視認するデジタルイラストは、こういった情報の集合体です。結果的に完成したものでそれが「何」であるかを判断します。
数値の集合体が、私たちが「何を見ているのか」を決めるというのは、なかなかにすごいことです。

数値で表せるデジタルイラストは、気象や地震のシミュレーションのような数値計算に役立つと考えられています。

「どうなるか」を仮設、予測、調査できる能力と、「どうしたいか」を表現、創作する能力

イラストレーターやデザイナーにはクリエイティブなセンスや芸術性が必要だと思われがちですが、実はこうしたエンジニアリングのセンスも必要です。
エンジニアやプログラマーには芸術性など不要と思われがちですが、何かを創り出そうとする意志や能力は芸術につながるものがあります。
AIやプログラムの登場で、自分が何をしたいのか、という客観的な自己理解を深めていく必要性は大きくなっているように感じます。この基礎ができていないと、グーグルの検索画面で適切な検索ワードを打ち込むことも難しくなりますし、また検索すればいい、という発想に至らない場合もあります。

論理的な思考は鍛えておくに越したことはありません。やっぱりプログラミング教室ってやっておくべきなのではないでしょうか。

＞産業会館パソコン教室　こどもプログラミング

この記事であなたの課題を解決することができましたか？

疑問点があったり、解決できなかったことがありましたら、お気軽にご相談してください。

慣れないと動作を作るだけで余裕で一日持っていかれますね、AdobeXDのアニメーション。

ドロップダウンメニューのアニメーション

この画面を

こんなふうにしたいとき。

動作としては、以下のようになります。

最初の配置はこう。

ヘッダーをずらすとわかりますが、ヘッダーの下にドロップダウンしてくるメニューがすでに隠されています。リピートグリッドを使ってテキストを打っていますが、下にボックスオブジェクトを設けてリピートしてもOKです。

また、現在見えませんが、グローバルメニューのところのホバーアクションは、カラーの透明度を0にしたボックスを置いています。

ドロップダウンメニューが展開したあとの図を二枚並べて、こんな感じ。

作業としては、

• ヘッダーの下に隠してあるドロップダウン時に展開するメニューを利用して、次のページを作る事。
• ホバーアクションで変化する透明なボックスのカラーを透明度100%にすること。

プロトタイプモードにして繋げたら、設定は「自動アニメーション」へ。

これで上記動画のように動作します。

ヘッダーをコンポーネントしてしまうと、サンプルビューで妙なちらつきが起こります。グループ化も同様。アニメーションしているところを内包してコンポーネント化はできないようです。
メニューの動作とメニューからページの遷移は別に作ったほうがいいかもしれません。

ハンバーガーメニューのアニメーション

やることはだいたい上記と一緒です。

画面はこんな感じ。

ヘッダーの裏にメニューを隠してあります。自動アニメーションで繋げていきます。

ムービーにするとこんな感じ。

なお、ドロップダウンメニューを子までアコーディオンにする場合はちょっと工夫が必要です。
下に隠すのはこの三つの要素。

子要素まで展開しきった場合はこんなふうになります。

アセットに名前を付けて管理しておくとわかりやすいですね。

ポイントなのは、ヘッダーから子要素、その下に回るサンプルタイトル2、3も、最初の画面から一緒に動かしていくこと。
ドロップダウンの一段階めが展開した時点で、子要素とその下の要素を一番手前の要素にし、透明度をゼロにしておくこと。

最終的にこんな動きになります。

横スライドインのメニューのアニメーション

オーバーレイ機能を使います。
画面はこんな感じ。

プロトタイプで「オーバーレイ」に設定し、アニメーション後の位置を設置します。

こんな動作になります。

オーバーレイはビューポートに指定した範囲にしか適応できませんのでご注意ください。

グローバルメニューの固定表示

オブジェクトを選択したときに右側メニュー内の「スクロール時に位置を固定」にチェックをつけると、オブジェクトが固定されます。オブジェクトはいくつでも固定にすることが出来ます。

様々な使い方がありますが、動作を入れるとどうにもビジュアルのデザインに集中できなくなってしまうのは難点ですね……AAdobeXDの動作を意識しながら使いこなすのにはまだまだ慣れが必要なようです。

この記事であなたの課題を解決することができましたか？

疑問点があったり、解決できなかったことがありましたら、お気軽にご相談してください。

WordPress5.0のGutenbergをIE(Internet Explorer)で動作させることは難しい、という話はよく聞くのですが、普通に別ブラウザで編集したものをedgeやIEで見た時、表示崩れが起こったのでそれに関するメモ。

WordPress5.0からのGutenbergの「レイアウト機能」にある「メディアと文章」「カラム」などはCSS Gridでできている

このマークのアイコン。

編集画面だとこうなります。

実際の画面だとこうなって、

スマホだとこうなります。

ブロック要素で「モバイルで重ねる」にチェックを入れると、以下のようになります。

実は編集画面の際こんなレイアウトにすることができますが、こうした場合モバイル版でも写真の位置は下に回ります。

モバイル版の時に写真を上に上げたい場合は、「grid-template-areas」の書き方を変更していかなければなりません。「メディアと文章」はつまり、CSS Gridを利用しているんですね。
これは「レイアウト機能」にある「カラム」も同じで、GutenbergのレイアウトはCSS Gridを中心に構成されています。
CSS Glidが本格的に導入されているのはIE11からなので、IE10以前でGutenbergを使うのは潔くあきらめるとともに、なるべく早急にIEの利用を中止してedgeに移ることを推奨します。

CSS Gridとはなんぞ

Gridとは水平線と垂直線の集合が交差したもので、線と交点で構成されます。CSS GridはWrapper（親）とItem（子）に分かれており、Wrapperに「display:grid;」を適応することでグリッドにすることが出来ます。線を「グリッドライン」、線で構成された四角い部分を「グリッドトラック」と呼びます。
この親要素「display:grid;」に対し、子要素に「grid-template-columns」「grid-template-rows」で行と列を制御しつつ、レイアウトを整えていきます。

IE11にCSS Gridを適応させるためには、ベンダープレフィックスが必要です。
当然、GutenbergをIEでスムーズに表示するためには、ベンダープレフィックスが必要です。

親要素
display: grid;
display: -ms-grid;

grid-template-columns:auto auto;
grid-template-rows:auto auto;

-ms-grid-columns:auto auto;
-ms-grid-rows:auto auto;


子要素

grid-column - -ms-grid-column
grid-row - -ms-grid-row

これをいちいち手打ちしていたのでは気が狂うので、Autoprefixerを利用している方が多くいます。

Autoprefixer

ちょっとお手軽なのがこのブラウザでできるベンダープレフィックス付与アプリ。
Autoprefixer CSS online

edgeやIEでGutenbergの表示をコントロールする

さてCSS Gridを利用したGutenbergでよく出るIEの表示崩れがこちら。

これは以下と同じページになります。

「メディアと文章」は、IEでは画像の大きさが「width: 100%;」になっていて、親要素のwidthに依存します。つまり、親要素のwidthが決まっていないと、widthが確定しているところまで大きくなります。
CSS Gridではwidthを指定することがあまりありません。グリッドで指定します。
一応「高度な設定」でクラス付けをし、「width: inherit;」にすることで画像はトリミングしたメディアサイズになりますが、floatでもflexでもないこの「メディアと文章」のレイアウトは、IEではどうしようもない、というのが結論でした。

なので、このレイアウトをIEにも適応したい場合は、カラムを利用することをお勧めします。

ちがうところは画像がセンター揃いでなく、左上揃いになるところです。
IEで見るとこんな感じ。

なお、テーマなどによってはこのカラムでも画像が親要素からはみ出すという現象が起きることがあります。その場合は以下のようにwidthを設定してあげるとなんとかなります。

.wp-block-image img,.wp-block-image {
max-width: 100%;
width: 100%;
}

結論としては、

• IEまで対応したい場合は「メディアと文章」は使わずに「カラム」を利用する
• 画像が親要素からはみ出す場合は「.wp-block-image img,.wp-block-image」に「width:100%」を適応する

まだまだIEが現役になってしまっているので、新しいアプリが活躍できないという現状、非常に残念でなりません……。
そのうち新しいバージョンでアップデートされていくと思いますので、今はなるべく最小限の動きで回避していきましょう！

この記事であなたの課題を解決することができましたか？

疑問点があったり、解決できなかったことがありましたら、お気軽にご相談してください。

ドット絵は以下のような条件下でつくられていました。

• 2色、4色、8色、16色……といったコンピューター上で扱いやすい色数
• 透過処理が必要な場合は上記色数から1色減る（厳密には透過＝透明な色があるためこれが1色としてカウントされる）
• 16×16、24×24、32×32、48×48ピクセルがベーシック。

ちなみにサイズ感覚としてはこんな感じ。

上記図は比率を合わせただけで厳密にピクセルにそろってはいませんが、16×16に比較して48×48がめちゃくちゃ大きいというのは伝わると思います。この上に64×64もあります。
初代のドラゴンクエストが16×16の4色でつくられていたことを考えると、ドット絵の世界は大きくなるにつれて表現の幅をものすごく広げてきたわけです。

ドット絵を描くには？

WEBブラウザツールとしてはミニドット絵メーカーさんがおすすめですが、AdobeFlashが2020年に終了予定なので、こちらは使えなくなってきてしまいますね。

ミニドット絵メーカー２

その他こんなサイトも。

Dot Editor

Piskel

Piskelはフレームを増やすことでアニメーションも簡単にGIF形式で作れるようです。便利。

スマホアプリでも様々に出ています。片手間ポチポチが楽しいアプリ。

ドットピクト！ かんたんドット絵アプリ　iPhone　｜　Android

ドット絵エディタ – Dottable　iPhone　｜　Android

ドットは根気、根気、根気！

普通のイラストであればモザイク化やピクセル化などのフィルターを利用してさくっとそれっぽいドットイラストを作ることができますが、よりドット絵らしいドット絵を作るとなるとやはりピクセルをポチポチしていくしかありません。こんな感じ。

パソコン教室ののぼりになりました。

相模原市立産業会館 パソコン教室

今回はあちこちの販促物で利用できるようにIllustrator＝ベクターアートでドット絵を作成していきたいと思います。

ベース作り

ドラゴンと勇者を何も考えず50×50で作ってしまったので魔法使いは48×48で作っていきます。
ピクセルが多いとツライので、根気があんまりないんだよなーという人は16×16で始めましょう。

ファイル設定はこんな感じ。

ファイルの右上に「ピクセルのスナップオプション」があります。チェックしておきましょう。

まずシェイプツールで48×48の正方形を作ります。

画面に対してめちゃくちゃ小さいです。
この正方形を選択した状態で「オブジェクト＞パス＞グリッドに分割」を選択します。（CCでない方は「段落」とかになっていると思います）
設定はこんな感じ。

すると「なんだこれ」というようなパスラインが出来上がります。

4ピクセルごとにラインを引いておきます。あとあと作業がらくになります。
右上の「ピクセルグリッドに整合」をクリックして、全体のマスがきちんとピクセルに合っているか確認したのち、パスを引いていきます。一本引いて、コピペしたら「control＋D」で繰り返しすると便利です。
見にくい場合は「control＋Yでアウトラインを見ながら作業するといいですね。

以下動画。

全部選択（Shift＋A）して、右クリック、「変形＞拡大・縮小」パラメータは以下の通り。

作ったガイドラインを選択して、「control＋5」でガイドライン化。すべてのグループを「control＋Shift＋G」で解除しておきます。

だいぶ作業しやすい環境になりました。
ガイド事に番号やローマ字を振っておくと、さらにやりやすい環境になります。
今回は中心線だけしるしをつけておくことにします。

ドット絵の描き方は人それぞれです。自由に色を置いていきましょう。

Illustratorで着彩する際、ダイレクト選択ツールや選択ツールを利用することが多いですが、ここまで細かくオブジェクトが整列していると、うっかりオブジェクトを移動させてしまうことがあります。
これを防止するために、ライブペイントツールが便利です。

ライブペイントツールは、矢印キーでスウォッチを左右に移動することが出来ます。あらかじめ決まった配色を利用する場合はこれが便利です。
「Altキー」でスポイトを利用することも可能です。

ここからはもうポチポチしていくだけです。

色数制限はご自由に。トーンを3色で構成するとより立体的に。

おおまかに形をとっていきます。

トーンをつけていきます。
ライブペイントツールはドラッグでオブジェクトを選択できます。

最後に「オブジェクト＞ライブペイント>拡張」します。

できあがりはこんな感じ。

48×48に戻したい場合はこれを10％に縮小。

勇者と並べるととても勇者が荒いので、いつか書き直したい所存……。

根気がいりますが、ライブペイントツールを使って作業を効率よく行っていきましょう！
Illustratorで作成しておくと、拡大縮小がラクなので、ぜひお試しくださいませー。

この記事であなたの課題を解決することができましたか？

疑問点があったり、解決できなかったことがありましたら、お気軽にご相談してください。

Photoshopで写真を開くとき、自動的にAdobe Camera Rawが立ち上がることがあります。
Adobe Camera RawはPhotoshopのプラグインとして組み込まれているRaw現像ソフトで、現像処理を行うことができます。

Rawデータとは

記録形式の一種で、高品位な写真編集を行うことができます。、
デジタル一眼レフなどの一部のカメラには、レンズがとらえた光の情報をデジタルデータに変換する部位（撮像素子CCD…Charge Coupled Device　や　CMOS…Complementary MOS）が搭載されています。Rawデータとはこの「ナマ」「未加工」のデータそのもののことで、JPEGよりも保持する情報量が多く、圧縮されていないため、非常にファイル容量が大きいのも特徴です。

写真を開いてスマートオブジェクト化する

Photoshop上で写真を開いたら、背景レイヤーをダブルクリックしたのち、スマートオブジェクトに変換しましょう。スマートオブジェクト化したオブジェクトは、その上にいかなるフィルター処理、調整処理、レイヤー効果を行っても、原本の写真の状態を保持して置くことができます。

Camera Rawフィルターを起動する。

フィルターを起動すると以下のような画面に変わります。

ツールパレットをクリックしていくと、内容のパレットが変化していきます。基本動作はほぼほぼこれだけですが、右下部分の「Y」を押すと、補正前・補正後の画面が比較できるようになります。

「基本補正」で全体的に白っぽく色を飛ばす

特に明瞭度を徹底的に下げると写真らしさがなくなります。

「ノイズ軽減」でデティールを飛ばします。

マットな仕上がりを目指して、細かい部分をどんどんなくしていきます。ノイズ軽減の「輝度」「カラー」は項目を選択することによりより細かい設定が指定できるようになります。
この処理が終わったらOKを押します。

通常のフィルターで整える

ピクセレートから「面を刻む」を選択し適応します。

また、「表現手法」から「油彩」を選択し、画像のように設定します。

最後にトーンカーブで色調を整えて完成。

ベースの写真の比較

ビフォー

アフター

写真の細密さをそのまま残しながら、なんとなくイラストテイストにしてみました。割と料理なども快適にイラストっぽくできます。

この記事であなたの課題を解決することができましたか？

疑問点があったり、解決できなかったことがありましたら、お気軽にご相談してください。