徐々に日本でもメジャーなデザインツールとなっている「Figma」。前回の記事『FigmaのSmart Animateを活用したプロトタイプ入門』では、簡単にアニメーションを実現できる「Smart Animate」機能を紹介しました。 本記事ではデザイン制作とその後のコーディング作業を強力にサポートしてくれる「Auto Layout」について詳しく紹介します。「Auto Layout」はデザインを効率よく進められるだけでなく、デザイン段階でHTML・CSSコーディングの参考になる情報を追加できます。 デザイン段階での使い方はもちろん、Figmaでデザインを受け取ったエンジニアがどう考えて実装していくべきかまで紹介します。デザイナーはもちろん、Figmaで作られたデザインファイルを受け取る可能性があるエンジニアの方も是非ご覧ください。 Auto Layoutとは 「Auto Layout」とは

共創のための地域基盤としての非公式組織の形成 / Informal community as an infrastructure for co-creation

2021年12月3日に本テキストブックを題材に、デザイン経営の考え方や導入方法、テキストブックの制作秘話などについて語るオンラインイベントが開催されました。下記のリンク先からアーカイブ動画をご覧いただけます。 詳しくはこちら（外部サイト） > 富士通のこれまでの実践から得られたノウハウと、イタリアのミラノ工科大学デザインスクールPOLI.Designの研究成果やフィロソフィーを組み合わせた、デザイン思考のテキストブック「Transformation by Design デジタルトランスフォーメーションに挑戦するデザイン戦略とサービスプランニング」（日本語版・英語版）を公開いたします。このテキストブックはPDFで閲覧可能です。またテキストブック制作の背景や制作チームの想いなど、制作のディレクターを務めた宇多村志伸と高嶋大介に話を聞きましたので、ぜひダウンロードの際に併せてお読みください。

Adobe XD 待望の新機能！自由自在な動的レイアウトを実現するスタックとスクロールグループの使い方 Adobe XDの2020年6月の大型アップデートでは、目玉機能として「スクロールグループ」と「スタック」が搭載されました。 「スクロールグループ」はアートボードとは別のスクロール領域を定義できる機能、「スタック」はオブジェクトの並び順と間隔を管理できる機能です。 とくに「スタック」は使いこなせるかどうかで、デザイン制作のスピードがかなり変わってくるのでしっかりと覚えておきましょう！ スクロールグループの使い方 スクロール領域を定義できる「スクロールグループ」が登場しました。「水平方向にスクロール」「垂直方向にスクロール」「水平方向と垂直方向にスクロール」という3種類の方向を設定できます。 「水平方向にスクロール」はカルーセルのような、画面幅以上の要素を横スクロールさせるのに便利です。

先日、Adobe XDの2020年3月の大型アップデートが公開されました。今回の目玉機能は「アンカーリンク」そして「オーディオの再生」です。これらのプロトタイプの可能性を拡げてくれる機能の使い方と注意点を紹介します。 その他にも「タップトリガーでの複数のアクション」「コンテンツに応じたエリア内テキストのサイズ変更のショートカット」「画像の置き換え」といった機能も登場しました。 Adobe XDを普段から使っている方には最新機能の復習として、使っていない方にはAdobe XDの進化を感じられる内容になっています！ アンカーリンク 同じページ上の特定のポイントまでスクロールするリンクの一種である「アンカーリンク」が登場しました。 プロトタイプモードでアンカーリンクしたい要素から、スクロール先にリンクを繋ぐだけで設定は完了です。同一ページ内でリンクを繋ぐと自動的にアクション「スクロール先」が設定

選択したアートワークの特色に変更するとき、ライブカラーを利用することができます。 スタート時。特色のスウォッチはありません。 アートワークを選択して、ライブカラー（［オブジェクトの再配色］ダイアログボックス）を呼び出す。 右下のアイコンをクリックして、［カラーブック］→［DICカラーガイド］をクリックする。この際、どのカラーを選択していても、すべてのカラーが選択したカラーブックのカラーに置換される。 ライブカラーを閉じると、特色のスウォッチが追加されている。 ［スウォッチオプション］を開くと、［カラーモード］は「特色」となり、うっすらと特色名が見える。 注意 すべてが特色になるわけではなく、PANTONE、TRUMATCH、FOCOLTONEを選択すると、グローバルスウォッチになります。 また、若干色味が変わってしまうこともあるので注意しましょう。 CMYK to Pantone JS4A

フォトレタッチの極意17：逆光のシーンを美しく仕上げる 連載 Photoshop フォトレタッチの極意 逆光で狙った紅葉の大カエデ。肉眼では葉を透かした光がキラキラと美しく輝いて見えますが、撮影すると暗く沈んでしまいます。そんな状況を乗り切るため、レタッチで仕上げることを前提に撮影し、空の青さと紅葉したカエデの両方を美しく表現してみましょう。解説は、レタッチャー／ライターの桐生彩希さん。「Shuffle by COMMERCIAL PHOTO」に掲載した内容から抜粋してお届けします。 __ Photoshop体験版をダウンロード Before After（※クリックで拡大） レタッチの設計 https://blog.adobe.com/media_fc484b2abccf7c549ef47dc10edb34590d39e875.gif １、「Camera Rawフィルター」の準備をする （

「即戦力レベルのwebデザイナーが最低限持っている知識を1カ月で身に付ける」ということを目的としたドリルを作りましたので、皆様に公開します。 ダウンロード[PDF/PSD/XD]（92MB） 本ドリルは、約140ページの参考書兼問題集になっています。まずは出題される問題を解き、その上で解説を読んで理解し、再度問題を解きなおすのが基本的な流れです。 内容は、私たちが未経験デザイナーの採用を進める中で、「こういう知識は早い段階で身に付けておいてほしいよね」という知識をまとめました。また演習用のPSD/XDファイルもドリルに含まれています。 身に付くのはあくまで「即戦力クラスの知識」であって、「即戦力」になれるわけではありません。デザインには、非言語・非定型なスキル領域も多々あるため、座学だけで即戦力にはなりません。しかしそれでも、ベースとなる知識は絶対に必要ですし、それを指南する参考書は、的を

こんにちは。食欲の秋まっしぐら井畑です。 今回は、Photoshopのショートカットを整理していたらステキな設定を見つけましたので、ご紹介したいと思います。 そのステキな設定とは「レイヤースタイルのコピー＆ペースト」のショートカットです。結構めんどくさい作業だったのですぐに設定しました;) さぁ詳しい説明しますよーそれではどうぞ!! レイヤースタイルのコピー/ペーストを設定すると幸せになれる レイヤースタイルって何？ ショートカットの説明の前に、レイヤースタイルについて軽く説明をしておきます。 レイヤースタイル(レイヤー効果)とはPhotoshopでレイヤー(図形レイヤーや文字レイヤーetc…)にたいして装飾や効果を設定できる機能のことをいいます。これを使えば、長方形に境界線をつけたり、文字にドロップシャドウをつけたりするのがとても簡単にできるようになります。 レイヤースタイルは一度作成す

約2年間、竹鼻良文が書き溜めた未来へ価値となる記事集。 約13年前にテクノロジーと出会う。当時は「変人」と言われながらも、建築と人工知能との関係性を常に意識しながら、あえて「非合理性」や「アナログ」を仕事に取り込むことで、人間が人工知能と共存できる方法を模索している。 クレイジータンク代表。LEXUS DESIGN AWARD 2017受賞。35歳以下の若手建築家の展覧会選抜。横浜アートコンペティション受賞。Dyploma×KYOTO審査員など。

ロゴ、ナビゲーション、ヘッダ、見出し、画像など、Webページやスマホアプリには、さまざまなデザイン要素が必要です。もちろん、これらを忘れることはないでしょう。 思わず、デザインするのを忘れがちなデザイン要素を紹介します。 もちろん、ここで紹介する50個すべてが必要ではありませんが、プロジェクトごとに合わせてご利用ください。 そういえば、フォームのサンキューページをいつも忘れるデザイナーさんが昔いました。 50 Things You (Probably) Forgot To Design 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 ログイン・サインアップ関連のデザイン要素 ファースト エクスペリエンスのデザイン要素 小さいけれど大切なデザイン要素 割と目立つデザイン要素 プロフィールスタッフのデザイン要素 ユーザーのさまざまな

Photoshopの切り抜きをやる方法として「選択とマスク」機能を使ったやり方がありますが、それの紹介です。 関連：Photoshopで使える！写真の背景を自動で切り抜く「Remove.bg」の使い方 目次 「選択とマスク」機能とは？ 各種機能説明 ツール ツールオプション 属性 「選択とマスク」機能とは？ photoshopCCのアップデート、　photoshopCC 2015.5が6月22日にきました！ 今回はそのアップデート情報の中で、業務上で実践的な「選択とマスク」のワークスペース機能ついてご紹介したいと思います。 選択とマスクのワークスペース機能とはいままであった「境界線を調整」がダイアログで表示されていたものが専用にワークスペースとしてまとめられさらに使いやすくなったものです。 各種機能説明 ワークスペースはマスクしたい写真を選択した状態で、 「選択範囲」の「選択とマスク(Al

2018年8月5日に公開された記事を、サムネイル画像など再編集、アップデートしています。 フォトショップの作業が速くなる秘訣は、ずばりショートカットキーによる時短テクニック。 その理由は、「もっと早く知りたかった」と思うほど、ラクラクな手軽さで、面倒な作業をすぐに片付けてしまうから。 「レイヤーの重なり順を変えたい」 「細かい部分の作業を行いながら、同時に全体表示で確認したい」 「不要なレイヤーを非表示にしたい」 そんな普段からよく行う作業も、効率アップさせる時短テクニック18個が揃いました。 フォトショップがもっとうまくなりたいと思っている人こそ、まずは試してみませんか。

Photoshopで画像を切り抜いたり、選択範囲やマスクを作成するのにはいろいろな方法が用意されています。しかしCC 2015.5からの「選択とマスク」、CC2018の「被写体を選択」を一度使ってしまうと、ほかのやり方には戻れないくらい簡単で、そして正確に作成することができます。 そしてさらに進化したPhotoshop CC2021での「選択とマスク」「被写体を選択」の使い方を紹介します。 ちなみに、下の作業時間は1分かかっていません。

Photoshopって知れば知るほど、使えば使うほど、便利で欠かせないツールですよね。そんなPhotoshop CCの実作業が快適になる時短テクニックを紹介します。 例えば一時的にスポイトツールを使う時、どのように操作していますか？ 「I」を押してスポイトツールに切り換える時に「I」を長押しで使うと、「I」を離した時に元のツールに戻すことができます（全ツール対応）。戻せるのはスペースバーの時だけではないんですね。 まだまだ知らないことばかりです。 28 Powerful hidden tips, tricks 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。 ※各ショートカットは、OS X用です。 Windowsの場合は、下記のように置き換えて利用してください。 command = Ctrl option = Alt delete =

現役プロが比較 ｢WEBデザインスクール12校｣おすすめランキング！ WEBデザインスクール選びで絶対失敗したくない！プロの目線でおすすめを教えて！ WEBデザイナーがデザインする際に使うツールはPhotoshopがベスト？ 最近ではSketchやIllustratorでWEBデザインをされる方も増えているが（Fireworksの人口は減る一方）、Photoshopでデザインされている方がまだ大半を占めている。 以前Webクリエイターボックスさんが実施したアンケートでもこのような結果だった。 やっぱりまだまだPhotoshop強し！みなさん、ご協力ありがとうございました！ぐっない? pic.twitter.com/ajGy0wb46g — Webクリエイター ボックス (@webcreatorbox) 2016年2月19日 さらにPhotoshopは古くなっているわけではなく、Photos

ポートレート写真のライティング、夜景の撮り方、女子や男子を魅力的に見せるポーズ、風景写真の正しい焦点距離の選び方など、カメラや写真撮影の勉強になるチートシートを紹介します。