タグ

Designに関するherakuresのブックマーク (209)

  • CSS Winner - Website Awards - Web Design Inspiration - CSS Awards

    CSS Winner awarding the best websites to promote web designers, digital agencies and developers. The top creative designs picked up for you, it is your best source of website design inspiration & website awards.

  • 「美しい角丸のTips」の先へ、ミクロではなくマクロで考える - Qiita

    概要 UIに関するTipsで、次のようなものがよく流れてきます。 「角丸がかかっている要素の内側に、更に角丸の要素を配置するときは内側の角丸 = 外側の角丸 - 間の余白にすべし」というものです。 このルール自体は数学的にも理にかなっており、外側と内側の角丸の余白面積を均一にする法則として機能します。 しかし、このミクロなTipsだけに注目してしまうと、アプリケーション全体の設計において重要な視点が抜け落ちてしまいます。 角丸の設計においても、個別の要素レベルでの最適化から一歩引いて、全体での一貫性を考慮したマクロな設計が必要なのです。 この記事では、角丸設計において「木を見て森を見ず」にならないための考え方と、実装時の具体的な対策について紹介します。 対象読者 UIデザイナー・フロントエンドエンジニア デザインシステムの構築・運用に関わる方 プロダクト開発でデザインと実装の両面を考慮する

  • 音楽、数学、タイポグラフィ

    先日開催された「フロントエンドカンファレンス福岡2019」で、「音楽数学、タイポグラフィ」というプレゼンテーションをする機会をいただきました。ここにその内容を再構成して掲載します。 みなさんこんにちは。今日の僕の話のテーマは「タイポグラフィ」です。まず最初に、そもそもタイポグラフィとは何なのかということからお話ししたいと思います。タイポグラフィというのはよく耳にするキーワードではありますが、じつはかなり誤解も多いのではないかと僕は考えています。 PxHere Typography from Hermann Esser’s (1845–1908) Draughtsman’s Alphabet, from rawpixel’s own antique edition 00030.jpg たとえば、GoogleTwitterやなんかで「タイポグラフィ」というキーワードで検索すると、手描きによ

    音楽、数学、タイポグラフィ
  • MARP|本質的な評価を可視化するWebデザインリンクのポータルサイト

    MAP×WARP=「MARP」世界と時代のトレンドにWARP。カテゴリーと自分史のMAP質的な評価を可視化・記憶が蓄積されるWebデザインリンクのポータルサイトMARP。MAP×WARP=「MARP」世界と時代のトレンドにWARP。カテゴリーと自分史のMAP質的な評価を可視化・記憶が蓄積されるWebデザインリンクのポータルサイトMARP。 MAP×WARP=「MARP」世界と時代のトレンドにWARP。カテゴリーと自分史のMAP質的な評価を可視化・記憶が蓄積されるWebデザインリンクのポータルサイトMARP。MAP×WARP=「MARP」世界と時代のトレンドにWARP。カテゴリーと自分史のMAP質的な評価を可視化・記憶が蓄積されるWebデザインリンクのポータルサイトMARP。

    MARP|本質的な評価を可視化するWebデザインリンクのポータルサイト
  • “グッド!”なポートフォリオが見れるサイト | GOOD PORTFOLIO

    世界中のクリエイターによる“グッド!”なデザインのポートフォリオが集結!Web、UI/UX、グラフィック、イラストなど。多ジャンルの情熱から、未来を描くヒントを。

    “グッド!”なポートフォリオが見れるサイト | GOOD PORTFOLIO
  • Best website design inspiration feed • MaxiBestOf

    Best website design inspiration feed

    Best website design inspiration feed • MaxiBestOf
  • バナーデザインの参考に!選りすぐりのバナー画像だけを集めたバナーデザインギャラリー|Bannnner.com

    Bannnner.comは、バナー制作者の見になるような、優れたバナーを集めたバナーデザインギャラリーです。バナーデザインの参考にご活用ください。

  • 【総数6983件】BANNER LIBRARY | デザインの参考に!おしゃれなバナーだけを集めたギャラリーサイト

    【2025年最新】バナーデザインの参考になる、おしゃれで良質なバナーデザインをまとめたギャラリーサイト、BANNER LIBRARYです。バナー広告から特集バナーまで、幅広いジャンルから収集しています。バナー作成の練習やWebサイトデザインのアイデアに繋がる事例を紹介しているギャラリーサイトです。

    【総数6983件】BANNER LIBRARY | デザインの参考に!おしゃれなバナーだけを集めたギャラリーサイト
  • スラデザ

    高品質なスライドのデザインのギャラリーサイト。現役デザイナーが完成度の高いスライドだけをピックアップしているので、営業資料、採用ピッチ資料、プレゼン資料のデザインの参考にご利用ください 。

    スラデザ
  • 誰も教えてくれない「分かりやすく美しい図の作り方」超具体的な20のテクニック

    【追記】この記事をきっかけに、名著「ノンデザイナーズ・デザインブック」の20周年記念特典eBookの制作に協力させていただきました。詳しくはこちらを御覧ください。 ノンデザイナーズ・デザインブック20周年記念の特典に寄稿しました デザイナーである・なしに関わらず、仕事の中で伝えたいことを「図」で説明する機会は多々あります。提案書で事業内容を説明することもあるでしょうし、具体的な数値をグラフで説明することもあるでしょう。そんな中でこんな指摘を受けたことはありませんか? ・最終的に何を言いたいのか結論が見えないよ。 ・関係性が複雑すぎて理解しずらいんだけど。 ・要素が多すぎて全てを把握するのが大変。 ・何をどこから見れば良いの? ・結局一番言いたいことはなんなの? ・文字サイズがたくさんありすぎてまとまりがないね。 ・安っぽいチラシみたいでダサイなぁ。 ・全体的にバランスが偏ってて不安定。 ・

    誰も教えてくれない「分かりやすく美しい図の作り方」超具体的な20のテクニック
  • 野良電通のメソッド|井上のきあ

    いいものをつくれば誰かが見つけてくれる、というのは選択肢が少なかった時代の話で、今は宣伝しなければ選択肢にも上がりません。 SNSでバズって売れたり、重版かかった例もありますが、レアケースなので、それを期待するのは賭けのようなものです。 宣伝を出版社に任せられると思ったから商業誌やってるのに…という気持ちはよくわかるんですが(わたしもほんとにそう思います)、いまの出版社に既刊をマメに宣伝する余裕はないです。やるにしても新刊以外は、売れたものを重点的に宣伝することになるので、まずは売れてください、という無茶振りです。何万部突破、みたいな宣伝を打つには、まず何万部か売れないといけないわけです。 そもそも同人誌の場合、作家が宣伝するしかないです。 そんなわけで今の時代、作家も宣伝ノウハウを知っていて損はないと思います。 (今の出版社に人手も暇もないのはじゅうぶん承知しているんですが、出版社のSN

    野良電通のメソッド|井上のきあ
  • HTML・CSSで実装するかわいいフキダシのアイデア - ICS MEDIA

    見出しなどのテキストを目立たせたいときに便利なフキダシ(吹き出し)。 この記事では、HTMLCSSだけで簡単に実装できる、シンプルなデザインのフキダシをご紹介します。 雑誌やポスターなどで見かける可愛いあしらいをウェブサイトにも取り入れたいと思ったことが、今回のテーマを選んだきっかけです。 とくにフキダシは、少ないコードで表現でき、見出しなどのテキストに華やかな印象を与えられます。 ウェブサイトを制作する際に、ぜひ取り入れてみてください。 また、この記事のほとんどの作例で、CSSの疑似要素『::before』と『::after』を利用しています。 疑似要素を使うと、不要なHTMLタグを増やさずにCSSで装飾できます。 ::before = 選択した要素の最初の子要素として疑似要素を生成 ::after = 選択した要素の最後の子要素として疑似要素を生成 これらは、要素に装飾的な内容を追加

    HTML・CSSで実装するかわいいフキダシのアイデア - ICS MEDIA
  • 紙っぽいかわいいWebサイト作りたい - Qiita

    かわいいWebサイトが作りたい Web上でグラフィックデザインっぽい表現をしてるサイト大好き! 思いついたら追加する 「版ズレ」風 版ズレ = 印刷の際に、色の版がズレて出力されてしまう現象。(アナログっぽい雰囲気を出すために、あえてズレているように見せるデザイン手法として使ってます) 一番上のレイヤーに紙っぽいテクスチャを乗せて乗算かける 後ろのテキストはaria-hidden="true"でスクリーンリーダーに読み上げられないようにする (疑似要素でやりたかったけど乗算上手くいかなかった・・) ▼ HTML <div class="hanzure"> <img src="紙っぽいテクスチャ" alt=""> <div class="hanzure01"> <p class="front">版ズレ風の表現</p> <p class="back" aria-hidden="true">版ズ

    紙っぽいかわいいWebサイト作りたい - Qiita
  • The essential guide to matching icons with typefaces

    A complete guide on how to pair icons and typefaces to create a consistent visual language.Choosing the right icon set to complement a specific typeface is crucial for maintaining visual consistency in a project. This ensures that all the elements work together to create a recognizable brand and improve the overall user experience. Here's what you need to know to make the right choices. Early cons

    The essential guide to matching icons with typefaces
  • Webデザインで「紙っぽさ」を出す方法を考えてみる|akane

    こんにちは!株式会社Rabeeの新人デザイナーのakaneです🏋 今回は、Webデザインで「紙っぽさ」を出す方法を考えてみました。参考事例も掲載しながら紹介していくので、どうぞ最後までお楽しみください! はじめに:「紙っぽさ」とは?私が言う「紙っぽさ」とは、おもに「雑誌っぽさ」のことです。Webデザインだけど、雑誌っぽい。ディスプレイに映っているけれど、エディトリアル感がある。 たとえば、以下のようなデザインは私にとって「紙っぽい」例です。 出典:六木未来会議出典:DMN出典:ぼくのおじさんどうして、私はこれらを雑誌のようだと感じるのでしょう?自分なりに考えたポイントを、ひとつずつ紹介していきます。 その①:文字が「組まれて」いる最初に挙げたWebサイトのひとつをよく見てみると、画像左上にある「NO. 153」の文字のうち、「NO.」だけが縦向きになっています。「NO.」と「153」を

    Webデザインで「紙っぽさ」を出す方法を考えてみる|akane
  • LogoFav - Curated Logo Inspiration Directory

    The image shows a modern and stylized logo featuring the letter "A" for AMG Solar Solutions. The logo is composed of two parts that form the letter's silhouette—a solid triangle on the right, representing the letter's backbone, and a series of parallel, diagonal lines on the left, giving the impression of a striped pattern or texture. The lines create negative space that separates them from the so

    LogoFav - Curated Logo Inspiration Directory
  • 「ダークパターン」とは?7つの類型を解説/企業30社 独自アンケート - クローズアップ現代 取材ノート - NHK みんなでプラス

    うそのカウントダウンタイマーや、在庫が少ない、需要が高いなどの表示。 画像では、カウントダウンタイマーや「今だけ」の表示で焦らせて「今買わなければ」という気持ちに追い込んでいます。 今回私たちは、企業の間ではダークパターンがどのように認識されていて、どのような対策を取っているのか、現状を把握するために独自にアンケート調査を行いました。 調査は、武蔵野美術大学の長谷川敦士教授の監修のもとで行い、ダークパターンが使用されることの多い6つのジャンル(ネットショッピング、旅行予約サービス、飲店予約サービス、動画配信サービス、音楽配信サービス、電子コミック配信サービス)について、利用者の多い5つのサービス、あわせて30のサービスを対象にしました(利用者数については、ニールセンとICT総研の調査を元にしています)。このうち、16のサービスの運営企業から回答がありました(回答率は53%)。 回答した企

    「ダークパターン」とは?7つの類型を解説/企業30社 独自アンケート - クローズアップ現代 取材ノート - NHK みんなでプラス
  • &(アンドのマーク)は使わない|しじみ |デザインを語るひと

    ビジネスに使えるデザインの話ビジネスにデザインの知識はけっこう使えます。苦手な人も多いから1つ知るだけでもその分アドバンテージになることもあります。noteは毎日午前7時に更新しています。 欧文のルール日人は知らない欧文(主に英語)のルールというものがあります。これは英語の授業でも教えてくれません。それゆえか翻訳者からの原稿にも、このルールに則っていないものがすごく多くあります。 知っておくと何かとアドバンテージになるので少しずつご紹介していきます。ご紹介した欧文のルールはこちらのマガジンにストックしていきます。 「&」の正体正式にはアンパサンド(ampersand)と言います。日では「アンドマーク」と呼ばれていることが多いこの記号。正しい名前は“ampersand”(アンパサンド)です。日でも馴染みのある記号で、企業名などでもよく目にするのではないでしょうか。 情報通信・メディア系

    &(アンドのマーク)は使わない|しじみ |デザインを語るひと
  • Knowledge | サステナビリティページが素敵なデザインの参考になるサイト

    サステナビリティページが素敵なデザインの参考になるサイト 積水化学 https://www.sekisui.co.jp/sustainability/ 代表から改めてサステナブルについてのメッセージ 社外からの評価で信頼性を高める 実際の活動について報告している 実際にサスティナブルについての実行報告をしているのがとても好印象です。 継続的にしているからこそサスティナブルと言えますね。 I-ne https://i-ne.co.jp/csr/ サプライチェーンポリシーを掲げ、サプライチェーン全体での持続可能な社会の実現に取り組んでいる。 ESGデータで環境関連、人事関連、社会貢献、ガバナンスと具体的な実績を数値で示している。 マテリアリティや目標、推進体制を示す透明性。 冒頭にサスティナブルに対するコピーが書かれていて、力の入れ方が伺えます。 また、具体的にESGデータの変遷を表にまとめて

    Knowledge | サステナビリティページが素敵なデザインの参考になるサイト
  • 1年で「chocoZAP」のバナー広告4000種類! なぜそんなに制作するのか

    まず、chocoZAPの簡単な概要を解説しよう。 chocoZAPは「簡単」「便利」「楽しく続けられる」というコンセプトで、全国1000店舗以上を展開。会員数は83万人を突破しており、国内フィットネスジムの会員数ではトップクラスを誇るまでに急成長している。サービスを展開するエリアは34都道府県だ(9月28日時点)。26年3月期中に2000店舗達成を目指している。 「着替え不要」「の履き替え不要」で、1日5分から気軽にトレーニング可能だとアピール。ジム内にスタッフは常駐しておらず、基的に24時間利用可能。セルフサービスに徹することで、月額2980円(税込3278円)という低価格を実現した。また、セルフエステやセルフ脱毛ができる機器を設置しているのも特徴だ。

    1年で「chocoZAP」のバナー広告4000種類! なぜそんなに制作するのか