ヘッダー（グローバルナビゲーション）のデザイン事例100選｜akane
こんにちは！株式会社Rabeeのデザイナーのakaneです🐏 今回は、ヘッダー（グローバルナビゲーション）のデザイン事例を調べてみました！パターンごとに分類しながら紹介していくので、どうぞ最後までお楽しみください✍ はじめに：グローバルナビゲーションとは？グローバルナビゲーションとは、Webサイトの全ページに共通して表示される「主要なコンテンツへの案内リンク」です。 一般的には画面上部のヘッダーに設置されることが多く、ユーザーが「今、どこにいるのか？」「目的のページはどこか？」と迷わないように誘導する大切な役割があります。 どんなサイトを作るときもほとんど必須のパーツですが、わたしは気付けばいつも似たようなレイアウトを使いがち…。そこで今回は、グローバルナビゲーションのデザインを100事例見比べて分類してみます🔍 ・ ・ ・ 1. スタンダード型まずは、一般的に「ヘッダー」の言葉で想像
ワイヤーフレームは“しゃべりながら”つくる｜akane
こんにちは！株式会社Rabeeの新人デザイナーのakaneです🏋 今回は、先輩に教えてもらった「ワイヤーフレームの作り方」を紹介します。わたしはこの方法で作るようになってから、ワイヤーフレーム作りが楽しくて、Webデザインの大好きな工程のひとつになりました。 このワクワク感を、ぜひたくさんの新人デザイナーとシェアできればと思います！どうぞ最後までお楽しみください✍ はじめに：ワイヤーフレーム（WF）とは？ワイヤーフレーム（「WF」と省略することも）は、Webサービスの制作過程で必要になる設計図のこと。例を挙げると、以前に私が個人的に制作した音楽教室のLPでは、以下のようなワイヤーフレームを作りました。 ワイヤーフレームは、Webサイトやアプリの中で「どんな情報を、どんな順番で見せるのか？」を決める骨組みです。ここで決めた内容が、後工程のデザインに大きく影響します。 ちなみに、ワイヤーフレ
Webデザインで「紙っぽさ」を出す方法を考えてみる｜akane
こんにちは！株式会社Rabeeの新人デザイナーのakaneです🏋 今回は、Webデザインで「紙っぽさ」を出す方法を考えてみました。参考事例も掲載しながら紹介していくので、どうぞ最後までお楽しみください！ はじめに：「紙っぽさ」とは？私が言う「紙っぽさ」とは、おもに「雑誌っぽさ」のことです。Webデザインだけど、雑誌っぽい。ディスプレイに映っているけれど、エディトリアル感がある。 たとえば、以下のようなデザインは私にとって「紙っぽい」例です。 出典：六本木未来会議出典：DMN出典：ぼくのおじさんどうして、私はこれらを雑誌のようだと感じるのでしょう？自分なりに考えたポイントを、ひとつずつ紹介していきます。 その①：文字が「組まれて」いる最初に挙げたWebサイトのひとつをよく見てみると、画像左上にある「NO. 153」の文字のうち、「NO.」だけが縦向きになっています。「NO.」と「153」を
1万パターンのイラストを作成できるツールを無償公開！ クリエイターの表現の幅を広げる支援をします｜note株式会社
イラスト作成ツールの概要無料でも利用できるデザインツール「Figma」上に、顔・上半身・下半身のパーツを用意。これらのパーツを組み合わせることで、さまざまなポージングや表情を持つ約1万通りのイラストを作成できます。使用したいシーンにあわせてイラストをカスタマイズし、活用してください。 【イラスト作成の流れ】 （1）カスタマイズしたいアバターを選ぶ （2）頭・上半身・下半身のパーツを、それぞれ好きなパーツへ切り替える （3）完成したイラストを出力する ◾️ツールの利用はこちら（Figma Communityで開く） 【作成できるイラストのイメージ】イラストの使用イメージイラストはnoteの記事だけでなく、仕事の資料、チラシやポスターなど、さまざまな場面で使用可能です。商用利用もできるので、ぜひお気軽にご活用ください。 今後は皆さんの声を受けながら、素材の追加や仕様のアップデートを検討予定です
これでもうUIデザイン用のSVGアイコンに困らない！ 商用無料のSVGアイコンを横断検索・ダウンロードでき、カスタマイズもできる便利サイト -Iconbuddy
商用で無料利用できる、MITライセンスなどのオープンソースで利用できるSVGアイコンは、たくさんのサイトからリリースされています。これらをまとめて検索してダウンロードでき、しかもカスタマイズもできてしまう便利サイトを紹介します。 FigmaとVS Codeのプラグインも揃っており、そこから直接アイコンを利用することもできるので、かなり便利です。 Iconbuddy -200K+ open source free svg icons Iconbuddyの特徴 SVGアイコンの利用方法 Iconbuddyで利用できるSVGアイコン Iconbuddyの特徴 Iconbuddyは、オープンソースで利用できる200,000種類以上のSVGアイコンを無料で検索、ダウンロード、さらにアイコンのカスタマイズもできるアイコン検索エンジンです。 Iconbuddy -200K+ open source fr
AdobeのFigma買収で登録者数は月次で56倍、Googleも使うデザインツール「Penpot」
英字新聞社ジャパンタイムズ、スタートアップメディア・テッククランチでの記者経験を経て、ダイヤモンド社のスタートアップ担当記者に。最近はフードテックやモビリティ領域に注目している。趣味はギターやシンセサイザーだが総じて下手。2020年7月よりダイヤモンド社「DIAMOND SIGNAL」記者。 From DIAMOND SIGNAL スタートアップやDX（デジタルトランスフォーメーション）を進める大企業など、テクノロジーを武器に新たな産業を生み出さんとする「挑戦者」。彼ら・彼女にフォーカスして情報を届ける媒体「DIAMOND SIGNAL」から、オススメの記事を転載します。※DIAMOND SIGNALは2024年1月をもって、ダイヤモンド・オンラインと統合いたしました。すべての記事は本連載からお読みいただけます。 バックナンバー一覧 Adobeによるコラボデザインツール運営のFigma買収
商用でも完全に無料！ レトロで温もりのあるかわいい日本語フリーフォント「しっぽり太ゴシック」「しっぽり太ゴチック」
「しっぽり明朝」「しっぽりアンチック」など、人気のフリーフォントをリリースされているフォントダスさんから、読みやすくて目に優しい太ゴシック体と太ゴチック体の2つのフリーフォントがリリースされました！ 平筆で描いたような太めのフォントで、墨だまり表現をほどこした温もりのあるデザインになっています。Webデザイン、グラフィックデザイン、同人誌などにも完全無料で利用できます。横書き・縦書きにも対応しています。 「しっぽり太ゴシック」「しっぽり太ゴチック」のダウンロード 「しっぽり太ゴシック」「しっぽり太ゴチック」の特徴 「しっぽり太ゴシック」「しっぽり太ゴチック」使ってみた 「しっぽり太ゴシック」「しっぽり太ゴチック」のダウンロード さっそくフォントのダウンロードから紹介します。 2つのフォントはそれぞれ別ページからダウンロードできます。 まずは、「しっぽり太ゴシック」のダウンロードページ。
2023年、ロゴデザインのトレンド -最近のロゴに使われているデザインテクニックのまとめ
デザインの引き出しを増やすためには、トレンドを押さえておくことは大切です。 デザインの基本となるタイポグラフィ、カラー、形などの要素が詰まった、最近のロゴデザインに使われているトレンド、デザインテクニックを紹介します。 2023 Logo Trend Report by BILL GARDNER 下記は各ポイントを意訳したものです。 ※元サイト様にライセンスを得て翻訳しています。 2023年、ロゴデザインのトレンドの傾向 花々を新しい解釈でデザイン「Wildflowers: ワイルドフラワー」 存在感のある流体の形状「Bloblend: ブロブレンド」 焦点の合った要素と合っていない要素をブレンド「Fades: フェード」 三次元の形を表現する「Foreshort: フォアショート」 上昇を表現する新しいデザイン「Thrust: スラスト」 自然界の神聖な数式から生まれた形「Spirals
CSS Stock｜Web制作を楽にするCSSコピペサイト
HTML・CSSの知識は不要。全222種類のパーツから お好みのものをご自身のサイトに取り入れることができます。 CSS Stockは「Web制作を楽にする」をテーマに、HTML・CSSのデザインやパーツをご紹介するサイトです。 お好きなパーツを選び、デザインや色を調整するだけ。あとはHTMLやCSSをコピペすれば、コーディング要らずでサイトに取り入れることができます。新しいスニペットも順次追加しており、色々なパーツを網羅できるよう日々尽力しています。 掲載しているコードについて 当サイトに掲載しているソースコードは全て自由にご自身のWebサイトやブログで使用いただいて構いません。もちろんオリジナルにカスタマイズしてご使用いただいても大丈夫です。 ただし別媒体でソースコード自体を掲載される場合は該当ページへのリンクを記載の上、参照元が当サイトであることを明記してください。 また掲載している
生成AI時代におけるUXデザイン | 生成AIをフル活用したUX設計手法＆生成AI時代のユーザー体験の変化について
ChatGPTやStable Diffusionなどの生成AIが急速に発展し、社会全体が大きく変化しようとしている。 UXデザインのプロセスや、UX自体のあり方も当然革新されていく。 今回はそうした生成AIによってUXがどう変化していくかを、具体的なメソッドや未来洞察といった具体・抽象を行き来しながら話していく。 1. 生成AIを活用したUXデザインプロセス どのようにGenerative AIを活用すれば、UXデザインのプロセスをよりなめらかに、効率的にすることができるのか？ 2. 生成AIでUX自体がどう変化するか Generative AIの発展によって、プロダクトにおけるユーザー体験のあり方はどのように変化していくのか？ 3. AI時代のデザイナー/PdM生存戦略 AI時代に、デザイナーやプロダクトマネージャーなどの個人はどのように強みを磨いていけばいいのか？ ▼ スピーカーTwi
マリオのUIがフラットデザインになった日を知っているか 〜 【視伝研】UIデザインの歴史を紐解く｜Yamashita Angelica
※ おことわり ※ この記事内で取り扱っているゲーム作品について、私は開発上の関わりは一切ありません。あくまでいち個人・いちファンとしての考察であることをご承知おきください。 今回の視伝研テーマは【UIデザインの歴史を紐解く】です。 年表形式でUIデザインの歴史を作りながらメンバーと意見を交換しました。PCやスマートフォンのOSのUIはもちろん、乗り物の操縦桿やSNSのデザインなど、さまざまな観点で資料を集めてみました。 そこで、元ゲーム屋の性として、個人的に楽しくなってしまうのはやっぱりゲームUIの歴史なのですが… なんか、ゲームのUIってこんなイメージありませんか。 ゲームUIデザイナーを目指す初心者が作りがちなやつ （一応弁明するとこれは1〜2分くらいで作った雑UIです）もちろんこういうのを作れることは大事なんだけど、「ゲームでよくあるやつ」以外のデザインの引き出しがないままだといず
デザイナーの仕事は AI でラクになる？実際に試してみた｜Goodpatch Blog グッドパッチブログ
こんにちは。Goodpatch UIデザイナーの金谷です。 最近、ChatGPTで話題沸騰のAI。機械学習、ディープラーニングなどの技術の進歩が著しく、自然言語処理、画像認識、音声認識などの分野で、驚異的な精度と高速な処理能力を発揮しています。 ChatGPTにいろいろな「仕事」をさせる実験が流行っていますが、私自身もAIに負荷が高い（面倒）な作業を肩代わりしてもらえないか、実験をしてみたくなりました。 個人的な願いですが、AIの活用によって業務効率が飛躍的に向上するといいなと考えています。より創造的なタスクに時間をかけられ、品質の高いものを生み出せたり、人間が意思決定をする上で、十分な情報や条件がすぐにそろったり。 というわけで、デザインのワークフローにおけるどんな課題を解決できるのか、順に追って考えてみたいと思います。 Webアプリ・モバイルアプリデザイナーのワークフローごとに面倒な作
『盗む』から『買う』に。老舗の工具箱屋がカゴを作ったら、年間30万個売れるようになった話｜唐金祐太
こんにちは、株式会社リングスター（以下、リングスター）の唐金祐太（カラカネ ユウタ）と申します。大阪本社、明治20年創業の工具箱、いわゆる職人さんの使うツールボックスを奈良県生駒市にて製造しており、現在私の父が５代目になり、私はアトツギとして日々東奔西走しております。 リングスターの手掛ける工具箱私達リングスターは、100年以上一貫して工具箱を作り続け〈木製・鉄製・樹脂製〉と時代に沿った最適な素材を選び、今日まで「現場でも20年以上使えるプラスチック製の工具箱」とその圧倒的な耐久性を職人さんに評価をいただいて参りました。今回は約１年前に弊社の製品のスーパーバスケット（以下、バスケット）についてツイートした所、思いのほか反響をいただきました事をきっかけに書かせていただきます。（遅） 年間30万個売れるバスケット 10年前に職人さんがカゴに工具を入れていた事を見て開発 従来のカゴは耐久性がなく
非デザイナーの僕が「デザインぽい」ことをする時に使う便利ツール17個｜苦しんでプログラミングを学んだ柴犬（くるしば）
※こちらの記事がはてブの総合人気エントリに入りました！ こんにちは。くるしばです。 元々コンサルタントの仕事をしていましたが、独学でプログラミングを学習し、Webサービスを作って起業しました。 その後個人で開発したサービスを売却したり、また別のIT系の会社を創業したりしています。 去年の8月から下記のTwitterにてプログラミング学習に関して発信し始め、ありがたいことに8000人の方々にフォローして頂きました。 プログラミング初心者に絶対覚えてほしい、ググる時の効率が10倍上がるコツ pic.twitter.com/hK1ZhNavwh — 苦しんでプログラミングを学んだ柴犬（くるしば） (@shiba_program) September 13, 2022 僕は普段はいわゆるPMやエンジニアとして仕事をすることが多いのですが、業務でも個人プロジェクトを作っている時でも 「最低限の見栄え
これでUIデザイン用のSVGアイコンに困らない！ 1,700種類以上が揃った商用利用無料、改変・再配布可の太っ腹ライセンス- MingCute Icon
WebサイトやスマホアプリのさまざまなUIデザイン用に、シンプルで洗練されたデザインのSVGアイコンが完全無料で利用できるMingCute Iconを紹介します。 このアイコンの特徴は、小さいサイズでもくっきり見えること。1,700種類以上のアイテムが揃っており、すべてSVGアイコン、そしてWebフォントとして利用できます。 MingCute Icon MingCute Icon -GitHub MingCute Iconの特徴 MingCute Iconのダウンロード MingCute Iconのアイコン MingCute Iconの特徴 MingCute Iconは、Webサイトやスマホアプリ用にシンプルで洗練されたデザインのアイコンです。すべてのアイコンは、24x24のグリッド内に設計されており、アウトラインと塗りつぶしの2スタイル、2pxのストロークとなっています。アイコンのフォー
Splineを使って3DCGを簡単にWebに取り入れてみよう｜東京のWEB制作会社・ホームページ制作会社｜株式会社GIG
こんにちは、GIGでデザイナーをしているおみどです。相変わらず3D表現を用いたデザインに惹かれてます。 グラフィック単体としても好きですが、Webサイトに取り入れた際に生み出される立体感のある奥行きなどが、サイトの世界観をよりいっそう深め、見ている人を引き込むところに魅力を感じています。3Dコンテンツは、サービスやプロダクトの良さを伝えるための、ブランディングの付加価値にもなるのではないでしょうか。 今回は、3DCG制作に興味のある方だけでなく、「実際に3D作品を作ってみたはいいけどWebで表示させるためにはどうすれば良いのか」など、3D作品の活用方法にお悩みの方にもおすすめの内容です！ はじめに私は、普段3DCGを制作するときは『Blender』を使っていて、前回の記事でもBlenderを使った3DCGを紹介しました。今回は比較も兼ねてさらに操作しやすい『Spline』を紹介します。2年
デザイナーがChatGPTに指示されながらECサイトデザインをしてみる実験 | Design Journal vol.25｜Sakino Tomiura
これはなに？昨年末にOpenAIがリリースしたチャット型AIの「ChatGPT」と一緒にデザインしていくプロセスで、実際にどんなことができるか？を実験してみたnoteです。 前提と注意点 🚨まずこのnoteの趣旨は「これらが実用的にデザイン制作に使える！」といったものではありません。 どちらかというと遊びに近く、実験的に行ったもので、結論から言うと現時点では実用的に使える要素はまだ少ないかなと思います。 また、前提として私はまだまだAIやChatGPTについて詳しいわけでは全くなく、これからちゃんと勉強してみようと思ってるぐらいのレベル、という前提で読んでいただけると幸いです。 （AIについて本を読んだり座学的な勉強から入るより「とにかく何かしら触ったりつくったりしてみる」方が楽しめると思い、せっかくなのでその実験の過程をまとめてみました。） 「こういうこともできるよ」「このやり方の方が
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
FigmaとPHPで作る1ミリたりとも表示崩れしない最強の帳票印刷ソリューション
Figma (@digitalagencyjp) | Figma
Spline