サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
TGS2024
note.com/onthehead
ディスプレイのVESAマウント部分を拡張し、ディスプレイ横にウェブカメラ固定する方法の覚書です。 あらましきっかけリモートワークによるオンラインミーティングが一般化し、いままでのPC環境にカメラを追加された方も多いと思います。ディスプレイに内蔵されたカメラやウェブカメラ、こだわりのある方はデジタルカメラを使用されていますよね。 現在わたしは取り回しが簡単で気軽に扱えるウェブカメラを、アームに取り付けたディスプレイの左横に設置して使用しています。 当初は小型の三脚やディスプレイアームの途中にカメラを固定してました。しかし、デスクを広く使ったりアナログ作業をしたいときなど、その都度ディスプレイの位置を変えなければなりません。ディスプレイの位置を変えるたび、カメラの位置も変更するのがとても煩雑に感じていました。 そこでディスプレイとカメラを上手に固定できないものか、といろいろ試したところ、VES
Adobe Illustrator で作業してて、いざ保存しようと思ったら「不明なエラー」が出て保存できないことありません? 昔は EPS 形式で別名保存したり PDF で複製保存して難を逃れたことがありましたが、ここで新たな解決方法を紹介されている方がいらっしゃいました。 その方法は「スクリプトで保存する」です。 なるほど神か天才か。 ただし、記事内で紹介されているは「一度保存したことのあるドキュメントを上書き保存する」方法なので、新規で作成して一度も保存したことのないドキュメントでは対応しきれないようです。 そこで、新規ファイルでも保存できるスクリプトを作成しときました。 上書きではなく、別名保存するスクリプトです。
昨今の状況から、自宅でパソコンを使い仕事をされる方が増えたと思います。 これを機に、お使いのパソコンを自分好みに設定してみませんか?ということで、私のキーボードやマウスといったインプットデバイスのこだわりや、それらのレイアウトや設定についてまとめてみました。 以降、macOS ベースの紹介になりますが、Windows にも似たような設定やユーティリティがあると思いますので、是非参考にしていただければ。 作業環境と主な作業内容 事務所はデスクトップの iMac 5K、自宅はラップトップの MacBook Pro 13インチ。 キーボードとマウスを使ったグラフィックソフトの操作と、キーボードのみを使った文章やコードの入力が主な作業内容になります。 キーボード 事務所では Apple Magic Keyboard、自宅では MacBook Pro のキーボードを使用しています。キーの打鍵音が小さ
Illustrator はドキュメント上にアートボード名が常に表示されません。アートボードツールに切り替えれば目視できますが、その都度アートボードを編集するモードに入ってしまい、作業の流れを中断してしまいます。 また、複数あるアートボードの名称や座標・サイズを管理するのも決して快適とは言えない状態です。 そこで、私たち三階ラボが長年採用しているアートボードの管理方法と共に、アートボードに関するスクリプトをご紹介します。 アートボードをレイヤーで管理する 私たちは特定のレイヤーにグループを配置し、スクリプトでアートボードに変換することによってアートボードを管理しています。 グループにはテキストとパスをそれぞれ1つ入れ、テキストはアートボード名に、パスの座標・サイズはアートボードの座標・サイズに対応します。 こうすることで、常にアートボード名が把握でき、普段使っているツールでアートボード名やア
Retina や 非 Retina、ドットやサブピクセルといった、ウェブやアプリケーションなどの最終的な表示に欠かせない液晶ディスプレイの表示について。 ※以前 Twitter 投稿した作図をリライトしたものになります。 液晶ディスプレイの Dot と Retina Retina ディスプレイと通常のディスプレイの表示の違いです。 ちなみに、Retina ディスプレイとは、Apple が 2010 年に発表した iPhone 4 で搭載された、高精細なディスプレイのことで、人間の網膜で画素(dot)を識別できる限界を超えるほどの高精細。という意味らしいです。 一昔前の iMac の画面解像度(1 インチあたりの dot の数)は 110 dpi 程度でしたが、近年の iPhone では 450 dpi を超えてます。Super Retina ディスプレイと呼ぶらしいですよ。すごいですね。
イラストや図面などで使用されるアイソメトリック図。 そのアイソメトリック風のボックスを簡単に作るスクリプトを作成しました。 アイソメトリック図(アイソメ図)とは アイソメトリック図は、立体を斜め上から見たパースがかかっていない図のことです。X, Y, Z 軸が 120°で等間隔に表示されます。等角投影図とも呼ばれます。 Illustrator でアイソメトリックなボックスを描く方法 一番簡単なのは、四角形を描いてから 効果メニュー → 3D → 押し出し・ベベル... を選び、位置:アイソメトリック法 - 左面、押し出しの奥行き:に数値を入力する方法です。 この方法は、四角形のサイズを変更したり押し出しの奥行きの数値を自由に変えられるため、後からいろいろ調整できるところが魅力的です。 ただし、3D 化されたオブジェクト同士でスナップできなかったり、アピアランスを分割すると直線が微妙に傾いて
Adobe Illustratorを使用して、コーポレートやブランド・サービスなどのロゴをデザインし、ビジュアルが決定してからクライアントに納品データとしてお渡しするまでの「ロゴデータを作成する工程」について、私が気をつけていることをまとめてみました。 この「ロゴデータを作成する工程」は気をつけなければならい細かい点が多く、作業に時間がかかります。見落としが発生しやすい作業でもあるため自分の備忘録も兼ねて。 ※ 私が試行錯誤しながら構築した作業工程なので、これが正解というわけではありませんし、後から変わるかもしれないので、あらかじめご注意ください。 📋 アートボードをチェックするアートボードはドキュメントの基盤となるもの。 わかりやすいアートボード名を付け、不要なアートボードは削除する。 1-1: アートボードの座標をチェックする 🆙アートボードの座標・サイズの数値に小数が入っていると
かっこいいなー、凝ってるなー、とか思いながら、いろいろな方々のデスク記事を拝見してるのですが、みなさんスゴすぎて「レベル高すぎね?」となったので、そこまで力を入れられてないけど、自分好みのデスク環境を、小さなこだわりと共に晒してみようかと… これから晒すデスク環境は、わたしの所属するデザイン会社「株式会社三階ラボ」の自室のデスクになります。 「自分の性格」に合った落とし所を見極める 性格や好みによって、無駄なモノは置きたくない人もいれば、フィギュアやぬいぐるみを飾ったりガジェットや本が手元に置いてある方が落ち着く人もいると思います。 わたしの場合は - モノを置きすぎると、視界のノイズが多すぎて疲弊してしまう - モノを置かなすぎると、一時的に置いたモノやちょっとした配置のズレが気になってしまう という絶妙なラインがありまして 細かなことが気ならない程度にはモノがありつつ、自分にとって無意
グラフィックソフトで当たり前のように搭載される角を丸くする機能。 角丸だったり、コーナーラウンド、Radius、border-radius、と呼ばれたりもします。 Illustrator 場合、効果メニューの「角を丸くする...」から半径を指定する方法と、コーナーウィジェットを表示し角付近にある丸いマークをドラッグ&ドロップしたり、変形パネルの角丸の半径やコントロールパネルのコーナーの半径を指定する「ライブコーナー」という2つの方法が存在します。 角を丸くするとライブコーナーの比較 角を丸くする効果はオブジェクト全体の角をまとめて丸くし、ライブコーナーは角それぞれを個別に丸くできる。という意味合いで使い分けてる方も多いと思います。 ですが、この2つの方法は全く違う方法で角を丸くしています。 さらに、ライブコーナーには相対値と絶対値という2つの方法が用意されています。 実際にどのくらい違いが
設定や操作を自分好みにカスタマイズするのが好きな私が、Mac に必ず入れる主要なユーティリティ系のアプリを 11 個ピックアップしてみました。 Karabiner-Elements https://pqrs.org/osx/karabiner/ いろんな入力機器をカスタマイズするユーティリティ。 左右の修飾キーの挙動を変えたり、キーコンビネーション(修飾キーと通常キーを同時に押すショートカット)と、キーを一度だけ押したときの操作を混在させたりと、コアな部分までカスタマイズできるのがすごい。 反面、設定の方法が難しくて、気軽にいじれないのが難点。 私は、キーボードの修飾キーをカスタマイズ(左右コマンドキーに英数・かなキーを割り当てたり)したり、不変的なキーリマップするときだけ使用してます。 BetterTouchTool https://folivora.ai/ いろんな入力機器をカスタマイ
私は昔から、気に入ったものや気になるものをベジェ曲線でガイドを引いたりトレースするのが好きで、時間があればつい Adobe Illustrator でなぞったり測ったり重ねたりして遊んでます。 ガイドを引いたりトレースするのって、地味で不毛な作業な感じがしてしまいますが、実際にやってみると、細かなルールが見えてきたり、パッと見では気づきにくい優しさや、見たときの気持ちよさの理由などが垣間見えてとても勉強になります。 #観察スケッチ と似たような感じです。気持ちいいパスを描く練習にもなります。 今回は、macOS / Adobe Illustrator でガイドを引いたりトレースすることによって気づいた例をあげつつ、普段私が行っているお遊びのフローを紹介させていただきます。 Windows や他のグラフィックツールを使ってる方は要所要所を読み換えたりググったりしてください。 フォントの場合
グラフィックソフトをで使う機会の多いグラデーション。そのグラデーションと合わせて使われるディザ処理についてまとめてみました。 ※以前 Twitter 投稿した作図をリライトしたものになります。 画像のディザ処理 まずは画像のディザ処理ってなんぞや。ということで、比較的わかりやすいサンプルで図にまとめました。 アプリケーションごとのグラデーションとディザ処理の違い 上記で説明した画像のディザ処理を含め、どのようにグラデーションを描画しているのか、各種主要アプリケーションでチェックしてみました。 Figma 以外のアプリは、チェックしたのが 2018 年の半ばなので、現在のバージョンでは仕様が異なっているかもしれません。気になる方は、スクリーンショットを撮って比較してみてくださいね。 以上、アプリケーションごとのグラデーションとディザ処理についてでした。 Twitter で投稿したものはこちら
パターンって、必要に駆られたとき(特に仕事)でしか作ったことないなー。 ってことに気づいたのをきっかけに、何かを黙々と作り続けたい欲求が溜まっていたのもあり、真似し始めた Daily Pattern。 30個たまったのでまとめてみました。 お題や制限が無いと何にもできないダメ人間なので、まずは平面充填というキーワードで作ってみることに。 平面充填(へいめんじゅうてん)とは、平面内を有限種類の平面図形(タイル)で隙間なく敷き詰める操作である。敷き詰めたタイルからなる平面全体を平面充填形という。 https://ja.wikipedia.org/wiki/平面充填 ちなみに、平面充填というワードは、数年前、モニターグラフィックスの仕事の打ち合わせ中、造形監督の片塰さんに教えていただきました。 平面充填って字面も音の響きも、なんかかっこいい! それではレッツスタート。 正多角形の平面充填シリーズ
私の大好きな Adobe Illustrator。 ロゴやアイコン、サイン、イラスト、図面、印刷物といった様々な用途で使われている、ベクターイメージ編集ソフトです。 そんな超メジャーなソフトですが、細かな不具合やえげつない問題点がいくつか存在します。 中でも、普段あたりまえのように使用する、回転・反転(リフレクト)系の操作に問題が潜んでいます。 まだまだ周知されてないようなので、ざっくりとまとめておきます。 ※このnoteは、以前投稿した内容の簡易版です。詳細については以前投稿した 三階ラボのブログ をご覧ください。 回転・反転させると形状が乱れる Illustrator の回転ツール、リフレクトツール、自由変形ツールを使って、オブジェクトの回転や反転を行うと、オブジェクトの形状が乱れてしまいます。 例えば、オブジェクトを選択し、回転ツールや自由変形ツールで Shift キーを押しながら左
iPhone や iPad、Apple Watch といった、Apple のモバイルデバイスのディスプレイサイズがひとまとめで比較できる一覧 PNG を作成しました。 以下の項目がブチ込んであります。 ・名称、米国での発売年、物理的なドット数、物理的な解像度、 論理なドット数、論理的な解像度、Retina画像、倍率。 ・対角インチ数、ドットピッチ、横縦アスペクト比、 ノッチや角丸を考慮した表示領域の面積。 ・対応OS。Apple が正式に発表していないものに関しては、私が計算した数値になりますので「だいたいこんなもんか」程度でお願いします。間違ってるところや変なところがありましたら、@onthehead まで、優しくご指摘ください。 Apple mobile device display size PNG 画像iPhone、iPad、Apple Watch をひとまとめにした一覧です。ぱっ
ウェブやアプリ、印刷物などのデザインやレイアウトを行っていると、「上の要素とボタンの隙間って何pxだろう」とか「配置する画像とテキストって何mmずらしてるんだろう」といった具合に、オブジェクト同士の距離を調べる機会がやたらと多いですよね。 Adobe Illustrator でオブジェクト同士の距離を調べる場合、 ・変形パネルや情報パネルの数値をチェックして引き算する。 ・移動距離分の四角形を描いて、そのサイズを見る。 ・どちらかのオブジェクトのアンカーポイントを掴みながら移動し、もう片方のオブジェクトにスナップさせ、スマートガイドの数値を見る。または、移動ダイアログを表示して移動数値をチェックする。というのが一般的だと思いますが、どれもひと手間かかって面倒くさいですよね。 そこで、2つのオブジェクトの座標とサイズを元に、距離をチェックできるスクリプトを作ってみました。 Get Dista
今回は、Adobe で配布されているドキュメントPDFを見ながら、スクリプトの雰囲気を感じていただく回です。それではレッツゴー。 Adobe が配布しているドキュメントをゲットするスクリプトをつくるとき、やりたいことがあっても、できることがわからないと何も書けないですよね。 ということで、まずは Adobe が配布しているドキュメントをダウンロードしましょう。 まずは、 http://www.adobe.com/devnet/illustrator/scripting.html にアクセス。 Illustrator のバージョンごとに、以下のようなドキュメントが用意されていると思います。 - Adobe Illustrator XX XXXX Scripting Guide - Adobe Illustrator XX XXXX Reference: AppleScript - Adobe
こちらの記事にはとてもグイッと引き寄せられるワードが沢山並んでまして、中でも、 今回伝えたい観察とは対象物の本質を捉える力のこと。どれだけ目の前の物から情報を引き出せるのか、その力を鍛えるための訓練なのです。どうやってそれは作られているのか?素材はなぜこれなのだろうか?デッサンじゃないのでお触りOKですし、なんなら分解したり切断してみても良いでしょう。毎日1時間とかはきついので5分〜10分でも続ける事が大事です。デッサンじゃないので絵が上手か下手かはどうでも良いです。完璧目指して3日坊主より、未熟でも毎日続ける方がいいです。という部分。 仕事柄(細々とデザイナーやってます)、ある程度のクオリティを確保しないと公表できない病気を持っているので、いろいろと気付かされました… 確かに! ただぼくは、 ・やりすぎると満足いくまで終わらない ・すぐ飽きてしまって途中でやめてしまう ・手書きの絵が上手
グラフィックツールとして有名な Adobe 製品。PhotoshopやIllustrator、InDesignなど、多種多様なアプリケーションあります。 これらの Adobe 製品に、メーカーや有志が配布されているプラグインやエクステンションというものをインストールすることで、ユーザーが自由に機能を追加することができます。 ただ、こういう機能が欲しいなあ。とか、ここをこう処理したいんだよなあ。と思っても、プラグインやエクステンションを自分でゼロから作るのは難しいですよね。 でも大丈夫。プラグインやエクステンション以外にも、Adobe 製品には「スクリプト」という便利な機能があります。 スクリプトというのは、JavaScript や AppleScript、VB Script という言語を使って、アプリケーションに操作を命令・実行する機能です。まあ、何言ってるかわかんないですよね。 というこ
いろいろな人がいろいろな意味合いで「デザイン」という言葉を使用されています。 例えば、見た目をコントロールするスタイリングという意味であったり、ゼロからなにかを生み出す行為、既にあるものを改善していく行為、何かを実現するためのフロー、システマチックな組み立てのためのグリッドやガイド、グラフィックソフトでつくられたもの、なにかを設計すること、誰かに指示されたことだけを処理すること、自発的になにかをつくること… などなど。 業界や分野、その人の経験や立場によって、デザインという言葉の意味が大きく違ってきます。 スタイリングに関してだけでも、シンプルな見た目を良しとしているのか、派手やかな見た目なのか、リアルなのか、武骨なのか、カラフルなのか、シックなのか、と、例をあげたらキリがありませんよね。 そこに発想や、設計、行動、フロー、コンセプトなどといった大きな部分を含めていくと、もうカオスです。
このページを最初にブックマークしてみませんか?
『宮澤聖二 | onthehead|note』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く