古代焼きナウマン ブランディング 桜本商店 リブランディング ビストロ温室 インテリアデザイン 愛とへいわ インテリアデザイン 昼はハンバーグ、夜は居酒屋 のブランドプロデュース。 NOKKE パッケージ YOTEI STOCK パッケージ BRANDING / CI VI / GRAPHIC / WEB / UI UX / SIGN / PLANNING / FOOD / CONSULTING AND DIRECTION SOMETHING LIKE THAT ©NEW.inc

こんにちは！ 新人デザイナーのぱんちゃんです。 入社して早5ヶ月、主にLIGブログのアイキャッチ制作を担当していますが、スピードもクオリティももっともっと上げていかねばならない今日この頃。 デザインがうまくなりたい……！！ もっとスピードをあげたい……！！！ そう思い、新年からデザイントレースをはじめてみました。 今回はデザインの勉強を始めたての方、私と同じく新人デザイナーの方に向けて、私がやっているトレースの方法と、実際やってみての気づきをお伝えできればと思います。あくまで一つのやり方として、参考にしていただけたら嬉しいです。 そもそもトレースってなに？ トレースとは「参考にしたいデザインをなぞって真似する」作業のことです。 とくにデザイン初学者の方にとってはトレースをするなかで細かい配色や、余白の取り方や文字の大きさなど、勉強になることがたくさんあります。デザインの引き出しが増え、いい

この記事では現役デザイナーDmitriy Buninが、より良いアイコンをデザインするときに心がけている8個のポイントをまとめてご紹介します。 WebサイトのUIインターフェースにおいてアイコンは重要なデザイン要素のひとつです。 アイコンは、コマンドやコンテンツを視覚的にあらわし、背後にある意味合いを伝える言語と言えます。ユーザーがすぐに理解、認識できるようにシンプルで効果的なビジュアル、メタファーを表現する必要があります。 現役デザイナー直伝、アイコンデザインがもっと良くなる８個のヒント ヒント１ – グリッドを設定しよう アイコンはひとつだけ作るのではなく、ほとんどの場合はセットでデザインすることになります。アイコンセットの統一感を持たせるにはグリッドが必要となります。 以下サンプル例のようにセーフゾーンを決め、キーラインを設定しましょう。アイコンのまわりには、少しの余白スペース（Bo

様々なデザインの参考を探していると、印象に残るようなタイポグラフィの文字デザインなど多くありますよね！ 「これってどうやって作っているんだろう？」「作り方が分からない」というデザイナー向けに、今回は、既成フォントから簡単な加工で印象に残る作字テクニック「文字の一部に切り込みを入れる」をお伝えします。 さく‐じ【作字】 ［名］(スル)印刷で、必要とする活字がないときに、既存の活字の部分を合成したり削ったりして新しい活字を作ること。また、その作った活字。パソコンなどで、内蔵・登録されていない字体を作ることにもいう。 https://kotobank.jp/word/%E4%BD%9C%E5%AD%97-509607 制作方法としてはとっても簡単で、一度覚えてたら、文字デザインの引き出しが増えますし、応用するとデザインの幅が必ず広ががります！ 今回の使用ツールは「Adobe Illustrato

皆さんはレイアウトを構成するときに「密度」を意識していますか？今回は、情報が多いデザイン、余白が美しいデザインどちらを作りたいときにもいかせる「画面上の密度」について考えます。今まで感覚的に組んでいたレイアウトも、密度を意識することでより洗練されるはずです。 編集・執筆 ／ MAYU KUGUTSU,YOSHIKO INOUE 目次 1.美しいビジュアルは“密度”が高い 2.レイアウトの４つの基本原則 3.レイアウトを組む際に意識したい、縦横斜めの概念 4.要素を足して密度を上げる“足し算のデザイン” 5.余白を使って密度を上げる引き算のデザイン 最後に 1.美しいビジュアルは“密度”が高い あなたが美しいと感じる平面デザインを複数思い浮かべてみてください。「美しい」と感じる理由はさまざまかと思いますが、それらは共通して“密度の高い”画面ではありませんか？ “密度の高さ”を抽象化して表すと

データがバラバラ 運用結果・クリイエティブデータ・ 営業データが連携していないため まともな分析ができていない。

デザイン事例、スクリーンショット、画像、動画、音声などの素材を簡単に整理し、アイデアを生み出し、仕事の効率をさらに高めましょう！

どうも。 最近エンジニアからデザイナーになったものです。 最近UIデザイナーになってUIデザインの情報源って意外とまとまってないなと思ったので、個人的によく参考にする情報源をまとめました。 ここに載ってないやつでおすすめの情報源あればコメントとかで教えてください。 OSガイドライン OSのデザインガイドラインはUIデザイナーだったら必ず読んでますよね。 Material Design デザインシステム的な話から装飾、カラーツールなどデザインに必要な話がとてもたくさん詰め込まれているためデザイン学習の教材として非常に優秀です。コンポーネントもユースケースやスペックまできちんと網羅されていて参考になるし、金と手間隙かかってるなあと思います。 Blogもあり、更新頻度は高くないですが面白い記事が多いのでたまに読んでいます。 Human Interface Guidelines こちらはApple

本書で紹介しているデザインのコードをご案内します。 解説で理解したコードの表示確認用としてご利用ください。 Prologue　本書を読む前に

デザインはちょっとした一手間を加えるだけで、ぐっとよくなります。 プロのUIデザイナーによるWebページやスマホアプリのUIとUXを改善するデザインの知識とテクニックを紹介します。 第12弾は、フォームやアクセシビリティに関するデザインのテクニックです。 UI & UX Micro-Tips: Volume Twelve. by Marc Andrew 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 1. ラジオを使用する場合、ドロップダウンを使用する場合 2. デフォルトのシャドウから卒業しましょう 3. ダークにデザインする時はホワイトも和らげる 4. 最高の画像で、プロダクトを正しく紹介する 5. フォームのエラーは色だけに頼らない 6. 入力例でフォームのUXを向上させる はじめに 次のプロジェクトのために効率

こんにちは、デザイナーの花ちゃんです！ 自社デザインチームで働いています。 LIGに入社してから作成したLIGブログのアイキャッチは300枚を超えました！ 私がアイキャッチを作成する上で最初の難関だったもの…… それは……文字の装飾！！ 前職ではスマホゲームのUI/UXを担当していました。ゲーム内イベントのキービジュアルやバナーを作成する際は、世界観にあったフォントがある程度決まっていたので、その中から合ったものを選択していたのですが……ブログのアイキャッチとなると、毎回記事の内容、書き手のキャラクターによってテイストや組み合わせを変えなくてはなりません。 圧倒的に引き出しが足りない……！ ということで、今回は文字装飾の基本のパターンについて、LIGブログのアイキャッチを参考例に挙げながらまとめてみることにしました！ 現場で活かせるWebデザインを勉強するなら…… Webデザインを徹底的に

キャリアの選択肢を増やすことで、デザイナーが活躍する機会を広げる これからデザイナーがキャリアを育んでいく時に「転職」だけが選択肢ではありません。 ReDesignerは副業やフリーランスのマッチングを通じて、デザイナーの機会を広げることで、デザイナーの人生に寄り添い、企業にデザインの力を証明していきたいと考えています。私たちReDesignerは、デザイナーと一緒に働き方の未来を作りたい。デザイナーの活躍する機会を最大化したい。副業・フリーランスから飛び込むことで、企業はデザイナーを理解し、デザイナーは企業を理解できる。キャリアの選択肢を増やすことで、デザイナーが力を発揮しやすい社会を作っていきます。 Product Designerプロダクトデザイナーは担当する製品・サービスにおける全てのデザインに責任を持ち、関わるユーザー、クライアント、社員やパートナーに最高の体験を提供する仕事です

UIデザインやワイヤーフレームの作成に便利なデザインツールがほしいと思ったことはありませんか？Adobe XDやSketchなどがメジャーなところですが、他にもインターフェースがわかりやすく、操作性と利便性の高いツールがいくつかあります。 今回紹介する「Figma（フィグマ）」は、それらに引けを取らず、さらに便利な機能も備えたツールです。Figmaがどのように役立つものなのか、使い方を初心者にもわかりやすいようにシンプルにまとめました。 ▼ディレクターとデザイナーで読みたい資料 マーケ思考のデザイナーは強い！ 提案型デザイナーのススメ リード獲得が重視される「広告・LP・サービスサイト」などに携わるデザイナーの皆様に向けての資料です。成果を出すデザインにするために心がけたいポイントを制作前、制作中、提出と修正、公開後の効果検証まで一連の流れに沿ってまとめています。 Figma（フィグマ）と

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

デザインはちょっとした一手間を加えるだけで、ぐっとよくなります。 プロのUIデザイナーによるWebページやスマホアプリのUIとUXを改善するデザインの知識とテクニックを紹介します。 第8弾は、読みやすく・理解しやすくするためのデザインのテクニックです。 UI & UX Micro-Tips: Volume Eight. by Marc Andrew 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 1. メッセージは正しい順序で構成する 2. すべての要素のシャドウは一つの光源を元にする 3. ホワイトスペースでビジュアルヒエラルキーを構築 4. 一行の長さを適切にすることで、読みやすさが向上する 5. 空の状態を工夫することで、ユーザーの初期行動を促す 6. 最適な読みやすさのために、x-heightに基づいてline

WebサイトやスマホアプリのさまざまなUIデザインに適した、シンプルなデザインのSVGアイコンが無料で利用できるIconicを紹介します。 アロー・ホーム、サーチ・ショッピングカート・バッグ・スター・メールなど、UIデザインでよく使用されるアイコンが揃っており、フォーマットはSVGで利用できます。また、Vue, Reactのコンポーネントとしても利用できます。 Iconic Iconic -GitHub Iconicアイコンの特徴 Iconicアイコンの使い方 Iconicアイコンの種類 Iconicアイコンの特徴 Iconicは24pxのグリッドでデザインされたSVGフォーマットのアイコンです。160種類のアイコンが揃っており、今後もアップデートで増やしていくとのことです。 Iconic アイコンは26のカテゴリに、全160種類。 24pxグリッドに基づくピクセルパーフェクトなデザイン。

こんちはっす！デザインレッスンをやっているSHUN INANUMAです！ デザインはデザイナーのものだけではない！デザイナー以外の色んな人がデザインをするようになった今だからこそ、素材サイトはかなり重宝されるのではないだろうか！ 本業がデザイナーの人も1から素材を作る場合もあれば、もちろん素材サイトを使う場合もめちゃくちゃある！ 素材サイトは多数存在するので、その中でもまずは知るべき素材サイトをまとめた！ あ、ちなみにデザインのポイントを解説するインスタグラムを運営しているのでこちらも勉強になるはず！(毎日投稿してます！) ここを押さえとけば完璧2サイト！！ これから紹介する2つのサイトでほとんど事足りるってくらいボリュームのあるサイト！何か困ったらこの2つのサイトを覗いてみよう！きっとお望みの素材が見つかるはず！！ 完璧素材サイト1：ACシリーズ ACシリーズは優秀！素材の数といい、種類

今回は、「Adobe XD」について書いていこうと思います。 近年、弊社でもWebのデザインを制作する際に使用するようになってきました。 デザインするのには修正も楽で、立ち上がりも早い、そしてデザインデータの共有も楽！　という、とても使いやすいイメージがありますが、後工程のエンジニアの方たちがマークアップするときに迷ってしまうものでは意味ありませんよね？ そこで今回は、"後工程に優しいXDの作り方"について、自分のためにも書いていきたいと思います。 今回は、後工程に役立つプラグインの紹介をしたいと思いますので、Adobe XDについての細かい説明は省かせていただきます。 プラグインのダウンロード方法 メインメニュー → プラグイン → プラグインを見つける → 参照から検索 01. テキストボックスの高さを合わせる「TrimIt」 TrimItは、テキストボックスの高さを合わせてくれ、サイ