「Figmaの2022年夏〜23年夏の新機能を扱うシリーズ」、今回は開発モード編です。 この記事は、2022年に自費出版で発売した『ちょっとできる人向けFigma本』のための追加コンテンツです。 この記事単体で読んでもらえるようにもしています！ ※2023年8月末時点の変更点や新機能を扱っていますが、間違い・アップデートなどありましたらお知らせください！ 『ちょっとできる人向けFigma本』の該当箇所……p27 「開発モード」はFigmaの歴史の中でもけっこう大きな追加アップデートです。今まで「インスペクト」として存在していた機能を引き継ぎつつ、大きく機能が追加されました！ 開発モードを有効にするには、ツールバー右の「</>」アイコン状のトグルスイッチをONにしましょう。 プライマリーカラーの水色が緑になる記事の後半で言及しますが、この「開発モード」は2023年末までは追加料金無しで利用で

ブラウザーで新たにインタラクションやアニメーションを作る時、皆さんはどのようにして使う技術を選んでいますか？ 使い慣れたライブラリに機能がないかドキュメントを調べてみたり、流行りのキーワードであればGoogle等で検索してみることも多いでしょう。一方、独自のビジュアル表現やアニメーションの場合、そもそも検索するキーワードがわからないことも多いのではないでしょうか？ この記事では、webのビジュアル表現・アニメーションを実現するベースの技術であるCSS・SVG・Canvas（WebGL）の3つについて、それぞれのできること・できないこと（得意・不得意）を作例とともに紹介します。 クイズ：どうやって実現する？　webでできるさまざまな表現 下の図はこの記事で紹介する9つのサンプルを並べてみたものです。すべてのサンプルはCSS・SVG・Canvas（WebGL）のいずれかを中心に実装されています

メインビジュアル、CTA、フッターなど、セクションやパーツごとの部分的なデザインを集めたサイトです。主にSaaS/コーポレートサイト/BtoBのWebサイトやランディングページを掲載しています。Webサイト制作の構成やキャッチコピー、デザインの参考にどうぞ。

2020年、転職にあたってポートフォリオを作った際の制作ノウハウ記事が、同じ境遇にある多くの方に見ていただけました。その流れでとある企業から「イベントでこの内容話してみませんか？」とお誘いをいただきました。せっかくなのでそのイベントでは記事にまとめた内容とは別のコンテンツを準備してお話させていただきました。 つくづく私は、ポートフォリオは自分目線の作品集ではなく、受け手目線のプレゼンツールであるべきだと考えています。イベントではそんな考えを「10のヒント」と題してお伝えしました。そして約半年経った今、当時のイベント動画が7日間限定で公開されることになったので、私もブログでその内容を公開したいと思います。 10のヒントは、ポートフォリオを作り始める前にどんな人たちにプレゼンするのかを考えた「準備編」と、作る際に採用担当者に伝わりやすくする技術を伝えた「制作編」の2部構成です。このエントリーで

ここ最近、転職するにあたって約10年ぶりにポートフォリオを作りました。私は元々ポートフォリオ作りが苦手で、力が入りすぎていつまでたっても完成しない…といった状況になりがちだったのですが、今回はわりとすんなり完成しました。 その理由は、ここ数年でデザイナーの採用に関わり、採用担当者の目線で沢山のポートフォリオに目を通す機会が増え、作成において気をつけなければならない点がなんとなく分かるようになったからだと感じています。 そこで今回は、こんなポートフォリオなら選考を通過しやすいのでは？と思うことをまとめてみたいと思います。尚、考え方は企業や採用担当者によって異なるので、あくまでも個人の考えとしてご参照ください。 作成前に踏まえておきたい認識 そもそもポートフォリオとは まず辞書で「ポートフォリオ」の意味を調べてみると、「紙挟み」「折鞄（おりかばん）」とあります。これは書類をまとめて入れておくケ

webやアプリのUIデザイン上達のコツとして、模写（コピー）がよく取り上げられます。私も過去に一時期やったことがありましたが、確かにいくつかのデザインを細かく観察して自分で再現してみることで、その後いざ実践！となった時に多くの学びを活かせたと記憶しています。 そうした経験から、最近も会社の若いメンバーに模写を進めて実践してもらっていたのですが、とあるメンバーから「模写はできたものの、どんなところを観察すればよいのでしょうか？」という質問を受けました。確かに、実践経験が少ない人にとっては、真似てはみたもののそこから何を学べばよいか分からない、というのは当たり前かもしれません。 模写というと変わったレイアウトや表現ばかりにとらわれがちなのですが、本当に身に付けたいのは「使えるwebサイト」を作る上でのデザイン力の基礎部分です。その基礎とは何か？を知ると学習の効率も上がります。そんなわけで今回は

デザインをする際に欠かせない要素の一つとして、カラーの配色がありますよね。しっくりこない、これであってるのかな？などで悩んだ経験は1度や2度はある事と思います。 今回はWEBサイトをデザインする際に必要な、ベースカラー、メインカラー、アクセントカラーの配色や配分についての基本ルールをまとめてみました。 3つのカラーとは？その比率とは？ WEBサイトの配色は役割別に３つあり、それぞれに、ベースカラー、メインカラー、アクセントカラーと呼びます。各々の比率をベースカラー70％、メインカラー25％、アクセントカラー5％の割合にすると、美しい配色に仕上げることができます。 ベースカラー 最も大きな面積を占める基本となる色で、余白や背景などに用いることが多い色です。メインとアクセントのカラーを引き立てる脇役的な立ち位置。 メインカラー その名の通りサイトの印象を決定づける主役の色です。 アクセントカラ

僕にとって、デザインのプロセスの中でもアナログなラフ描きが欠かせません。手描きに込められた線には能動的な意思があって、それが結果的にデザインに宿ると思うからです。手描きラフに着手した途端に没入して元気さえでてきます。ああしたいこうしたいと、言葉や素材を吟味しながら「体重のせて描く」感じがいいのですよね。 そしてそのラフは、必ずとっておきます。手描きのラフは何回も書き直すので、思考とブラッシュアップの変遷が手に取るようにわかります。それをチームで共有すれば、学びの教材にもなります。 このnoteでは、僕が普段取り組んでいるラフ描きの取り組み方を紹介するとともに、一部のラフを公開したいと思います。 ラフの取り組み方 1. 消さない アナログは消すのが面倒なのでアイデアをどんどん出すことに集中できます。デジタルはすぐデリートできるので、アイデアの源泉の段階でちまちま編集をしてしまうという落とし穴

こんにちは。こちらはLinc'wellアドベントカレンダーの24日目です。 最近 figma を使い始めたのですが、私はキャリアとしてはフロントエンドエンジニアとしての歴が長く、何か実現したいデザインが頭に思い浮かんだ時、思考としては 「display:flex の justify-content:space-between なレイアウト作りたいんだけどな〜」とCSSでイメージしてしまいます。 きっと同じ「CSSで言ってくれないと分かんない」という方もいらっしゃるのではないかと思ったので「CSSで言うこれはこんな感じで作る」という情報が役に立つのではないかと思い、今回筆を取りました。 ※ この記事は最初のとりあえずの索引としては有効だとは思いますが、真面目に入門する際には figma の公式チュートリアル動画を一通り手を動かしながら見ることをオススメします。この記事で書いていることは大体カ

【デザイン初心者向け】入社して初めて作成したアイキャッチ、先輩からのフィードバックをすべて公開します！ こんにちは！ そして、初めまして！ 今年の6月より社内制作チームのデザイナーとして入社しました、えびちゃんと申します。LIGのデザインスクール「デジタルハリウッドSTUDIO by LIG」でWebデザインを学び、未経験でLIGに入社いたしました！ 社内制作チームでは、LIGブログの記事の一番上やサムネイルとして表示される画像（アイキャッチと呼んでいます）やバナーなど、社内で使用する制作物を作成しています。 私が入社して初めて作成したのは、「現役デザイナー厳選！デザインを勉強したい人におすすめの本23選」という記事のアイキャッチでした。このアイキャッチ制作には、デザイン初心者が陥る悩み・学びがたくさん詰まっていました。そこで、先輩デザイナーからフィードバックを受け完成するまでの過程を共有

こんにちは、株式会社LIGでアートディレクターをしている竹原と申します。 「デザインとは情報設計」、といわれています。例えばボタンでも、アクションやレイアウトに応じてさまざまな設計をおこなっているんです。 今回は、僕が普段ボタンデザインをする際に考えてることをまとめてみました。デザイナーの方にはWebやUIのデザインをする際の考え方の参考に、デザイナー以外の方には、デザイナーって普段こんなことを考えながらデザインしているんだな、と感じていただければ幸いです。 独学でつまずいていませんか？ Webデザインをもっと効率的に学びたい、プロの現役デザイナーに教えてもらいたい……という方は、「スクールでの勉強」もおすすめです。LIGでもWebクリエイター育成スクール「デジタルハリウッドSTUDIO by LIG」を運営しております。「今すぐスクールの概要を知りたい！」という方は、ぜひこちらより資料を

はじめにこのnoteは、私がTwitterで発信した「デザインの思考＆Tips」のなかから、レイアウトデザインに関する内容を編集してまとめたものです。普段のデザイン業務で私が意識している、webデザインを中心としたレイアウトの考え方やTipsを紹介します。 「レイアウト」といっても、ただ単にドキュメント上に要素を置くのは誰でもできます。どんな素材にするか、どんな動線にするかを考えて位置を決めていくのが「デザイン・レイアウト」。こちらがデザイナーの仕事ですね。デザイナーは、達成したい目的のために秩序を与えつつ工夫していくことが求められます。 では、配置するにあたってどのようなことを意識したり注意すればよいでしょうか。 川の流れのようにレイアウトするにあたっては、情報の優先順位を決めてそれをボリュームで割り当てるのが基本です。ただし、これだけだと単に積み重ねているだけで流れが悪いので、視線が滑

デザイナー兼踊り手のJona（＠jona_yawaraka）です。わたしはLIGブログに掲載されるアイキャッチ（ブログ記事の顔になる画像）、バナー、背景ジャック（大型バナー）など、さまざまな画像を製作してきました。 画像をつくって客観視したとき、「ある程度まとまってはいるんだけどなんだかしっくりこない。でも何が悪いかわからない……」ということありますよね。 わからないときはとにかく手を動かして、いろいろと試してみるとうまくいったりするもの。ということでデザインがしっくりこないときにとりあえず試したい10の簡単な方法を、私の経験を踏まえながら紹介いたします。 独学でつまずいていませんか？ Webデザインを効率的に学びたい、転職・就職を目指している、誰かに教えてもらいたい……という方は、「スクールでの勉強」もおすすめです。どんなスクールがあって、どんな内容が学べて、費用はどれくらいするのか、情

デザイナーの高島です。 ベイジには2019年4月に入社しました。webサイトや業務システムのUIデザインを主に担当しています。『knowledge / baigie』でも、デザイン関連の情報を発信していきたいと思います。 デザインツールで制作したデザインデータをコーディングする時、「デザイン通りになっていない」「ルールに一貫性がなくてコーディングに余計な手間がかかった」といったトラブルが起こりがちです。 しかしこれらの大半は、デザイナー側の配慮である程度防げるとも思っています。そこで今回は、私がコーディングを依頼する際にデザイナーとして気を付けていることをまとめてみました。 なお、ベイジが使用しているメインのデザインツールはAdobe XDなため、この記事もXDの使用を前提としています。ただし、ツールに関わらない話も多いはずなので、皆様が使っているツールに置き換えながら、お読みいただけると

<button></button>は最も使用されている要素の一つです。フォームの送信、モーダルを開く時、データを表示する時など、インタラクションのトリガーとして使用されています。button要素の詳細とすべてのブラウザで機能するようにスタイルを完璧に定義する方法について紹介します。 さらに、よく使用されるボタンのスタイル方法をはじめ、ボタンの実装時にある落とし穴の解決方法についても明らかにします。 Styling The Good Ol' Button Element by Ahmad Shadeed 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 button要素のデフォルトのスタイル button要素の基本的なデザイン アイコン付きのボタン 複数行のボタン アンカーリンクとしてのa要素とbutton要素 アウトラインボタンの

本格Webサービス開発ならCAMP

前回、フリマアプリのワイヤーフレームを配ったら好評だったので再び。 よくあるコーポレートサイトのワイヤーフレームを作りました。 トップページにお知らせやバナーが貼ってあって、各ページに詳しい情報が載ってる感じ。 プレスリリースのページとか。 会社概要とか。 採用ページ モバイルもあります WordPressのテンプレート用にスクリーン名を付けていますコーポレートサイトをオリジナルで作るなら大抵WordPressでやることになるかと思います。なのでスクリーンの名称にWordPressのテンプレート作成時のファイル名を付けておきました。 採用情報ページの募集職種・オフィス環境・福利厚生あたりはカスタム投稿・カスタムフィールドを使うと良い感じにあとから管理しやすくなると思います。 ダウンロード

こんにちは。minneでデザイナーをしております。sziaoreoです。 minneではデザインに作品画像を素材として使用させていただくことが多く、バナーなどでよく画像をグリッド状に並べます。 業務でそういったデザインを何度も作っているうちに、なんとなくこう考えると楽だな〜というマイルールができてきました。 この記事ではわたしが画像をグリッドで並べる時に考えていることを書いていきます。こういう考え方もあるのね程度に読んでくださればと思います。 画像を並べる時、わたしは以下のように心がけています。 画像が持つ様々な要素・存在感を「重さ」として考え、 「組み上がった時にどこかに重心が偏ってしまっていないか」 「同じ重さの要素を持ったもの同士がやたらと隣り合っていないか」 というようにバランスを保つように組む その時に使える画像や制作物の目的によっても変わりますが、 配置を決める際の優先順位が高

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

こんにちは！トライブグループという会社でCDOをやっています、原田佳樹 @yoshigorouu といいます。前回はこんな記事を書きました！ 今回の記事では、デザイナーが抑えておくべき定番欧文フォント31個(+おまけ)をまとめました。世の中で使われている大体のフォントをまとめてあるので、何かデザインするときの辞書的な感じになれば嬉しいです。 1. フォントの世界に魅入ったきっかけ私のデザイナーとしてのキャリアはスタートアップ歴が長いので、スキルセットがサービスデザインに寄っています。客観的に見てもグラフィカル領域(特にサービスロゴ)が弱く、それを強化したい気持ちは前からありました。 世の中にある様々なサービスロゴを見ていくと、大体のロゴはシンボル＋タイポグラフィで構成されています。なので、フォントについて多少なりとも詳しくなれば、ロゴ制作の半分は出来るのではと思うようになりました。 リサー