カテゴリー: デザイン

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

普段私がイラストを制作するときは主にiPad版のCLIPSTUDIO PAINTとAdobe Illustratorを使用しているのですが、他に面白いペイント系アプリがないか（ブログのネタ作りのために）色々インストールして試したりしています。

（前回試したアプリの記事はこちら）

今回は「コンセプト」というアプリをインストールしてみました。

すごくいいUIだなと感じたのが、インストールしてから最初にキャンバスを開いたとき、初期設定がこのような形で自動で開かれることです！

これのおかげで設定のボタンが右上のこの場所にあることがすぐに理解できるし、逆に「設定をすべて完了しなければアプリが使えない」ということもありません。

左利きの私としては、利き手の設定が初期設定の一番最初にあるのが優しいなと感動しました！

他のアプリだと利き手の設定はわざわざ環境設定を開かないといけなかったり、そもそも利き手の設定がある事自体気が付かないことも多いので。

ここから色を選べるようです。

すごい…

「コピック」という文字がある通り、色塗りマーカーであるコピックの色番号が各色に書かれています。

コピックを普段から使っている人だと、実際のコピックで塗った色をデシタルでも使いたい！デジタルで塗った色をコピックでも塗りたい！と思ったときに楽ですね。

ブラシはここから増やすことができます。

レビューを見た感じだと建築関係のお仕事の方がよくこのアプリを使用しているようでした。

そのためか、「外壁」という有料のブラシセットが…！

パステルやエアブラシ、漫画のトーンのようなセットもありました。

この中にあった「Memphis模様」という、パターンが入れられるブラシセットを購入してみました。

このようなかわいい模様がすぐに入れられるブラシが20種類入っていました！

柄物が好きなので、こういうブラシがあるのはとてもいいなと感じました。

設定はこんな感じ。

機能が多すぎないからこそだと思いますが、ボタンが大きくてシンプルでわかりやすい。

キャンバスの背景が変えられたりグリッドに種類があるのも便利でいいですね！

アートボードのサイズ無限って初めて見ました。

ちなみにCLIPSTUDIO PAINTの設定はこんな感じ。

機能の数が違うので仕方がないですが、コンセプトの設定画面がわかりやすいのがわかりますね。

まとめ

たくさんの色を使ったりブラシを使い分けたり…といった本格的なイラスト作品を作るというよりは、ある程度決まったツールやカラーパレットでデザインラフを作るというのに向いていそうだなと思いました！

CLIPSTUDIO PAINTやフォトショやイラレなどのUIに慣れきっているせいで少し癖がつよいなと思ってしまいましたが、設定ページなどはシンプルで基本的に親切なUIだと感じました。

普段から、管理画面の設定周りのUIのデザインがごちゃつきがちになってしまうことに頭を悩ませているので、このあたりは色々と学ぶことが多いなと思いました…！

Stack Overflow 2019 Developer Surveyで最も人気のある開発者環境ツールとしてランクインし（wikipedia参照）、2021年現在テキストエディタ戦国時代を制した感のあるVS CODE。個人的にも以前からMicorosoftのアプリケーションでは久々の当たりだなぁと思っていたのですが、2021年10月20日にwebブラウザ版がリリースされました。

ということで少し触ってみたいと思います。

必要なことはURLを叩くだけ

ブラウザを起動して「https://vscode.dev/」にアクセスするだけでエディタが起動。たったこれだけなので割りとガチめにびっくりしますｗ立ち上がりも一瞬。

そしてサイドメニューの「Open Folder」をクリックするとローカルファイルにアクセスするのがすごい。

Dockerで仮想開発環境を利用してたとしてもローカルにマウントしたファイルを編集するので特に問題なくVS CODE for the Webは活用できるんじゃないでしょうか。

気になる環境設定や拡張機能について

とはいえテキストエディタといえば自分が作業しやすい設定や拡張機能を追加してなんぼというところなので、いくらWeb版があるからといってそこんところどうなの？

・環境設定はローカルストレージなどに保存している模様。一度設定した環境は維持されます
・拡張機能については一部のものだけ利用可能のようです。残念。（日本語化プラグインも未対応）
　PHP系はLINT系（構文チェック）ツールやスニペットなどはほぼほぼ対応中のようです。
　逆にHTML5やJavaScript系は割とある様子。Pythonなんかもちらほらという塩梅。
・「GitHubの機能も統合しているため、リポジトリ、コードスペース、プルリクエストの拡張機能が利用できる。　「github.dev」はWeb用VSCode向けにカスタマイズされたインスタンスで、ログインが自動で行なわれ、.comを.devに変更すればリポジトリを編集できる。とのこと（出典『「Visual Studio Code」がインストール不要に。Webブラウザで動作｜PC Watch』）

vimは使えましたｗ

Setting Syncで同期可能

GithubもしくはMicrosoftアカウントでサインインすればローカルアプリのVS CODEの設定を引き継ぐことができるようです。

詳細はリファレンスで確認することができます。

まとめ

かなり良い線までいってるのですが拡張機能が未対応のものが多いので、Web版をメインに据えるのはまだまだ厳しそうですね。今後の動向に期待したいところ。
VS CODEでは最近、悪意のあるプラグインによるセキュリティが問題になっていたりするので、クラウド上ならセキュリティ対策が最速で対応されそうですし、その辺は価値があるかもしれません。
今のところはサーバーなどを介さずフロントのみで実行できるようなスクリプトを作成するなんかには合っているのでプログラミングのお勉強などで利用するのにはちょうど良さそうです。

マニュアルを作成する時どのようなソフトを使用しているでしょうか？
illustratorで作成している方もおられると思うのですが、InDesignで作成するメリットと方法をご紹介したいと思います。

InDesignで作成するメリット

InDesignで作成するメリットとして下記があります。

・ノンブル（ページ番号）が自動で記入される
・タイトルに基づいた目次が自動で記載される
・タイトルなど同じパターンの装飾がある場合はあらかじめ記載される

これらのメリットがあることによって、マニュアルを変更・更新する際の労力がかなり改善されると思います。
InDesignを普段使わない方はイラレと少し使い勝手が異なるので違和感があると思うのですが、一度使い始めるとだんだんなれてくると思いますので一度試してみることをおすすめします。

まずはファイルの新規作成

まずは新規ファイルを作成します。
新規ファイルを作成するときInDesignの場合「レイアウトグリッド」と「マージン・段落」の２つがあります。
特徴は下記のとおりです。

レイアウトグリッド・・・小説やエッセイなど本のようにテキスト主体でレイアウトが決まっている場合に使用します。
マージン・段落・・・パンフレットやカタログなど自由にテキストや写真などを配置したい時に使います。

今回は「マージン・段落」で作成します。
「方向」や「綴じ方」「マージン」などは作成するマニュアルの内容によって決めます。

ページの追加方法

新規作成時にページ数を決めれるのですが、後で追加・削除したい場合はページパネルを右クリックするなどして行います。「ページ」に「８」を入れると８ページ追加されます。

①「ページパネル」を選択します。
②「ページパネル」を右クリックし「ページを挿入」をクリックします。
③追加したいページ数を入力し、OKをクリックします。

ノンブル（ページ番号）の追加方法

まずはページ番号が自動で入るように準備を進めます。

①ページパネルで「A-マスター」をダブルクリックします。
②文字ツールでノンブルを設置したいところに、テキストエリアを作成し「A」と入力します。
③「A」を選択した状態で「書式 > 特殊文字を入力 > マーカー > 現在のページ番号」を選択します。
右側も同様に作成します。
※イラレで言うところの「ポイント文字」はなく「エリア内文字」のみです。

ページに「A-マスター」が適用されているとページがノンブルが記載されます。
※適用されていない場合は、「A-マスター」をページパネルの中のページにドラッグします。もしくはページを選択し、右クリックで「マスターページを適用」をクリックします。

以上でノンブルが自動で割り振られるようになります。

同じパターンのページタイトルの追加方法

同じパターンのページタイトルなどがある場合は、下記のようにします。

①「ページパネル」を右クリックし「新規マスター（B-マスター）」を作成します。
②タイトルを追加します。
③文字の大きさなど設定したら、「段落スタイル」パネルから「新規スタイルを作成」をクリックします。名前を「ページタイトル」など分かりやすい名前に変更します。（後で一括で変更できるようになります。目次作成の際も使用します。）

④「A-マスター」を「B-マスター」にドラッグ&ドロップします。これで「B-マスター」だとノンブルとページタイトルが適用されます。

⑤変更したいページを選択し、右クリック「マスターページを適用」を選択し、「B-マスター」に変更します。

各ページ（B-マスター適用ページ）にタイトルが追加されたと思います。A-マスターも適用されているのでノンブルも追加されています。

タイトルを変更する際は、変更したいページで「shift + command」を押しながらクリックするとタイトルが変更できます。
（そのままクリックしても何も反応がありません）

目次の作成方法

目次もあらかじめ用意しておくと、タイトルに合わせて自動で反映することができます。

①目次ページで長方形ツールで、図形を作成します。
②「レイアウト > 目次」を選択します。

③「目次スタイル」で「段落スタイル」で作成した「ページタイトル」を選択・追加します。
OKをクリックし、①の図形をクリックすると目次が追加されます。

④文字の大きさや色などを調整し、新しく段落スタイル「目次」を追加します。
追加した段落スタイル「目次」をダブルクリックします。
⑤段落スタイルを編集します。「タブ」を選択し、適当な位置（少し右側）にタブを追加し、リーダーに「・」を記入します。
OKをクリックします。

⑥目次とページ番号の間に「・・・」を追加する場合、文字の大きさや色などを調整し、
新しく文字スタイル「目次の点」を追加します。
※「段落スタイル」ではなく「文字スタイル」ということに注意してください。

下記画像のようになったと思います。

次に目次のスタイルを編集します。
「レイアウト > 目次スタイル > 編集」をクリックします。

⑥項目のスタイルを③で作成した「目次」に変更します。
⑦項目と番号間を「^y」に変更し、スタイルを⑥で作成した「目次の点」に変更します。

⑧OKをクリックします。
最後に目次の記載されている図形を選択し、「レイアウト > 目次の更新」をクリックすると変更が反映されているかと思います。

新たにページを追加して目次を変更したい場合は、同様に「レイアウト > 目次の更新」をクリックすると変更が目次に反映されます。

途中から1ページ目にする

表紙を最初に持ってきて、その次から１ページ目にする場合は下記のようにします。

①「ページパネル」のページを開始したい箇所で右クリックし、「ページ番号とセクションの設定」をクリックします。
②「ページ番号割り当て開始」を選択し「1」にしてOKをクリックします。

最後に

マニュアルを作成する際のInDesignの便利な機能をご紹介させていただきました。
慣れないうちは、ややこしいかもしれませんがこれらの方法を使うとマニュアルの更新や変更をする時の手間が大きく改善されると思います。
長くなりましたが最後まで読んでいただきありがとうございました。

Twitterで、Realistic Paint Studioというアプリが紹介されているのを見かけたので、有料のアプリでしたが購入してiPadにダウンロードしてみました。

絵の描き方が学べる

これはチュートリアルの一部なのですが、なんとツール自体の使い方のチュートリアルではなく、水彩画の描き方をチュートリアルで教えてくれるのです。

実際の水彩画も、大体このような手順で描いていたと記憶しています。

リアルすぎる…

ツールの見た目がかなりガチ

これはツール選択画面です。

私は文房具や画材の類が大好きなので、これだけでもかなりテンションが上がります…！

アナログ画材っぽい書き心地のソフトなどはこれまでも色々とありましたが、ここまで画材自体のビジュアルが推されているお絵描きツールは初めて見ました。

仕事などで絵を描く時はシンプルで使いやすいUIのアプリの方がいいですが、ゆっくり時間をかけて好きなように描きたい時にはこのUIは筆や絵具を選ぶ楽しさも味わえて良いかもしれません。

時々思い出したように襲い来る「アナログの画材触りたい！！！」の欲求は、このアプリでもだいぶ満たすことができそうです。

水彩画の他に、素描モードと油彩モードがあります。

値段は1,480円と、絵に全く興味のない人が試しに入れてみるアプリとしては少し高いかも…

ですが、画材やアナログ絵画が好きな人や、アナログ画材を試してみたい人はかなり満足できると思います！

（アナログ画材を実際に買うと1,480円では全く済まないので…）

今のところ水彩モードしかまだ触れていないので、ゆっくり他二つのモードも試してみたいと思います！