シンプルなHTMLで、レスポンシブとライト・ダークモード対応のモダンなWebページを簡単に作成できる超軽量CSSライブラリ -matcha.css
シンプルなHTMLを使用して、レスポンシブ対応、ライト・ダークモード対応のモダンなWebページを簡単に作成できる超軽量CSSライブラリを紹介します。 シンプルなWebページやポートフォリオ、プロトタイプなどをすばやく作成したい時に便利で、ベースにしてリセットCSSの拡張版としても利用できます。 matcha.css matcha.css -GitHub matcha.cssの特徴 matcha.cssの使い方 matcha.cssのデモ matcha.cssの特徴 matcha.cssは、classレスでHTMLのあらゆる要素にシンプルで読みやすいスタイルを設定するように設計されたCSSライブラリです。ライト・ダークモード対応で、テキストはユーザー設定が尊重された適切なスペースで配置され、ナビゲーションやフォームなども非常に見栄えがします。 matcha.css HTMLで作成された静的ペ
UIデザインに必須の16の論理ルール！ デザインは細部のちょっとした作り込みが使いやすさを決める
UIデザインはシンプルで論理的なルールを理解することで、情報に基づいたデザインの意思決定を効率的におこなうことができます。UIデザインをより使いやすく改善する16の論理ルールを紹介します。 長い記事なので、時間がある時にゆっくりご覧ください。 16 little UI design rules that make a big impact by Adham Dannaway 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 1. スペースを利用して関連要素をグループ化する 2. 一貫性を保つ 3. 見た目が似ている要素は同じように機能するようにする 4. 明確なビジュアルヒエラルキーを作成する 5. 不要なスタイルを削除する 6. カラーは意図的に使用する 7. インターフェイス要素のコントラスト比が3:1であることを確
画像生成AIでウェブサイトやUIデザインを生成するコツ
人工知能（AI）は、ウェブサイト制作を、根本から変えてしまうでしょう。 今のところ、AI画像生成ツールは、呪文（プロンプト）を唱える、ちょっとしたコツを覚えることで、以下のようなWebレイアウトを作成できます。 beautiful landing for spiderman website, design, ux/ui, ux, ui --ar 3:2 --v 4 --q 2 「花屋、フラワーショップ」をテーマにすると、一発でWebサイト向けレイアウトを錬成できます。 「日本」をテーマにすると、こんな美しいUIデザインに。 実際にAI画像生成ツールを使いこむうちに、少しずつわかってきた、AIツールでウェブサイトやUIデザイン画像を生成するコツを、メモ的にご紹介。 アップデート、継続していきます。 コンテンツ目次 ✨ AI画像生成ツールとは？ ✨ 唱える呪文（プロンプト）って何？ ✨ 画像を
もっと早く読んでおけばよかった！ Figmaの一歩踏み込んだ実践的な使い方まで、詳しくていねいに解説された良書 -Figma for UIデザイン
Web制作やUIデザインの必須ツール「Figma」は2022年7月に日本語版がリリースされ、9月にはAdobeの傘下になることが発表され、今後もますます必須ツールとして欠かせないものなるでしょう。 Figmaの基本的な使い方をはじめ、実践的なUIデザインの制作、Figmaならではの生産性を上げ効率的なテクニックなどを詳しく解説した解説書を紹介します。 本書はリファレンスとプラクティス両方の側面があり、Figmaをこれから始める人にも、Figmaをもっと使いこなしたい人にもお勧めの一冊です。 本書は、Figma日本語版に対応した解説書です。インストール・セットアップをはじめ、基本的な使い方、Figmaならではの生産性を上げる機能の解説だけでなく、ワイヤーフレームやプロトタイプや詳細デザインの作成など実践的な作業フローまで学べます。チュートリアルに使用されるファイルは、サポートサイトからダウン
FigmaでUIのアイコンを使うならコレ！ 高品質でシンプルにデザインされた1100種類のアイコン素材 -Untitled UI Icons
WebサイトやスマホアプリのUIデザインにぴったり、Figma用の高品質でシンプルにデザインされたアイコン素材を紹介します。 たとえば、アローだけでも90種類以上、ホーム・サーチ・カート・メールなども複数のデザインで用意されており、UIにぴったりなのが見つかると思います。 Figmaなので、カラーやストロークの太さなどは簡単に変更できます。 Untitled UI Icons Untitled UI Iconsは、高品質でFigma用のアイコンが見つからなかったので作成した、とのことです。 UIデザイン用にクリーンで一貫性のあるニュートラルなアイコンライブラリで、Figmaのために、Figmaで作成されています。
プロのUIデザイナーに学ぶ！ UIとUXの印象がよくなるデザインの知識とテクニックのまとめ vol.15
デザインはちょっとした一手間を加えるだけで、ぐっとよくなります。 プロのUIデザイナーによるWebページやスマホアプリのUIとUXを改善するデザインの知識とテクニックを紹介します。 第15弾は、ユーザビリティ・フォーム・ミニマルにデザインする弊害に関するデザインのテクニックです。 UI & UX Micro-Tips: Volume Fifteen. by Marc Andrew 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 1. ページ内リンクを効果的に用意する 2. ボタンのラベルは一貫性を保つ 3. 長いフォームは冗長な作業を最小限に抑える 4. 長いフォームは常にラベルを上部に配置する 5. 不要なテキストでフォームのUIを乱雑にしない 6. 特定のUI要素でミニマムな外観を避ける はじめに 次のプロジェクト
プロのUIデザイナーに学ぶ！ UIとUXの印象がよくなるデザインの知識とテクニックのまとめ vol.14
デザインはちょっとした一手間を加えるだけで、ぐっとよくなります。 プロのUIデザイナーによるWebページやスマホアプリのUIとUXを改善するデザインの知識とテクニックを紹介します。 第14弾は、レイアウトのグリッド・使いやすいフォーム・配色で悩んだ時に関するデザインのテクニックです。 UI & UX Micro-Tips: Volume Fourteen. by Marc Andrew 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 1. グリッドの間隔はハードではなく、ソフトに 2. フォームはインタラクションの後、すぐにフィードバックを提供 3. 配色で悩んだ時は、類似色 4. テキストの見栄えを良くするグリッドの使い方 5. 検索ボックスの幅は広くする 6. 素早いアクセスは、ナビゲーションをスティッキーに はじ
【総まとめ】2021年話題になった世界のベストWebデザイン厳選50個
当サイトでは、定期的に新しく公開された最新Webサイトデザインをまとめています。今回は、2021年のベスト・オブ・Webデザイン50個を厳選、ピックアップしご紹介します。 配色えらびやレイアウトの参考にぴったりで、2022年予想の人気デザイントレンドも意識した素敵なWebサイトを中心にまとめています。 【総まとめ】2021年話題になった世界のベストWebデザイン厳選50個 Rockwool トップ画面に表示されたビルをクリック、スクロールで進んでいくと、壁や床、排水管にいたるまで細部まで細かくアニメーション付きで説明する、新しすぎる制作実績の見せ方。ぜひ一度サイトを開いて体験してみましょう。 Skolkovo Business District マウスの動きに合わせて、照明を当てることで、ビルでできる影を操ったり、マウスを左右に動かし、3Dモデリングを360度回転できます。スクロールに合わ
文字や背景にピュアブラックを使ってはいけない理由
UX Movementの創立者、ライター。ユーザーに優しいUXデザインのスキルを読者の方が上達できるよう、UX Movementのブログを始める。 デザインにピュアブラックを使うと可読性が低くなると知っていましたか？ 統計によると、「アメリカの成人の58％」がコンピュータ作業で眼精疲労を経験したことがあるそうです。デザイナーは使用する黒の色に注意を払うことで、目が疲れる可能性をある程度減らすことができます。 ピュアブラックの文字や背景 ピュアブラックの文字や背景と白の組み合わせは、ユーザーが文章を長時間読むとき目に不快感を与えることがあり、眼精疲労を招いてしまいます。 白は100％の明度であり、黒は0％の明度です。このように明度のコントラストが強いと光量に不均衡が生じ、ユーザーが明るさに順応しようとするために目が酷使されることになるのです。 この現象を実証するために、暗い部屋で明るい電灯を
東京大学i.school
東京大学の新しい教育プログラム「i.school」人間中心イノベーション・シンポジウム – 世界のトップ・ビジョナリーに学ぶ！ i.schoolエグゼクティブ・ディレクター堀井秀之教授が、Tom Kelley（IDEO）、Heather Fraser（Univ. of Toronto）、Barry Katz（Stanford Institute of Design）、紺野登（多摩大学大学院）などのトップ・ビジョナリーを迎え、人間中心イノベーションをめぐりディスカッションを展開します。 人間中心イノベーション・ワークショップ – IDEO流イノベーションの真髄を体験！ オープン記念人間中心イノベーションワークショップは、働く母親と子どものコミュニケーションをそのテーマに選びました。IDEOの全面的な協力により、プロトタイピング、オブザーベーション、インタビュー、ストーリーテリングなどIDEO
IDEOが教える「イノベーションを生む秘けつ」
英国のEconomist誌が、「いまやイノベーションは現代のあらゆる経済圏において、もっとも重要な要素とみなされている」と宣言した。 今でこそ「イノベーション」という言葉は日本にも浸透してきたが、ほんの数年前までは、「イノベーションとはなにか？」と質問をすると、「新たな物を生み出すこと」とか、「古い体質から新しい体質に生まれ変わること」という答えが返ってきていた。単に「技術革新」と訳している辞書もあった。 これらの答えは間違いではない。だが不完全だ。 イノベーションという単語は、オーストリアの経済学者ヨーゼフ・シュンペータが、その著書「経済発展の理論」の中で「経済循環の軌道が自発的・飛躍的に変化する現象」という意味で使ったのが最初で、「新しい財貨の生産」「新しい生産方式の導入」「新しい組織の創出」「新しい販売先の開拓」「新しい仕入先の獲得」の5つに分類されている。 あらゆる新たなものを創出
Hiroki Nakamura
31歳にしてうんこをもらしました About さわかみ証券 ギガゲーム Jump Festa 2022 ONLINE BitFlyer Yahoo! MASS MATRIX SHIN SEKAI NOWHERE マッハバイト「真実の広告」 #GO2030 TEHAI JUMP FESTA 2021 ONLINE SOFTBANK 5G バーチャル大合唱 BOOKOFFから本気のお願い VARP マッハバイト 無音アドトラック bitFlyer TVC FUJIROCK ’19 EXP Eテレ バビブべボディ リセット・ゲーム マッハバイト さわかみ証券 ギガゲーム Jump Festa 2022 ONLINE BitFlyer Yahoo! MASS MATRIX SHIN SEKAI NOWHERE マッハバイト「真実の広告」 #GO2030 TEHAI JUMP FESTA 2021
ドケチなのに良質な無料漢字フォントを探している人向けフォント大全集｜| ＾＾ |秒刊SUNDAY
ドケチなのに良質な無料漢字フォントを探している人向けのフォント集 バイオレンスなニュースサイト秒刊SUNDAY（びょうかんサンデー） 無料で使えるフォントは多々ありますが、日本語フォントはなかなかないものです。また日本語でも漢字が使えるものはさらに絞られ、数少ないのですが、これらはその少ないうちの一つです。 ◆Windows用Ｏｓａｋａ ■WindowsでOsakaフォントを使おう！ ◆モトヤ ■全文字フリーフォント ※登録が必要です。 ◆Holiday MDJP02 ■Holiday-MDJP03 / 2byte True Type ■Holiday-MDJP03 ◆メイリオ ■ Windows XP 向け ClearType 対応日本語フォント ◆IPAフォント ■IPAフォント ◆M+フォント ■トップ ■M+フォント( ◆VLゴシックフォント ■VLゴシックフォントファミリ ◆MO
インテリア・雑貨を紹介しているステキなブログまとめ
2009/03/23のスパイラルマーケットさんの「【贈り物選びに】雑貨・インテリア紹介ブログまとめ」で、知らないブログが半分くらい取り上げられており、巡回先が増えて幸せな気持ちになりました。 同時に、エントリに当ブログも含まれていてかなり焦りました。あわわ。 スパイラルマーケットさんのまとめエントリの二番煎じなのは承知で、インテリア・雑貨を紹介しているステキなブログをご紹介します。かぶっているブログも多いですが、気にせず書いてみます。 ■となりのインテリア→まとめのインテリア インテリア・雑貨紹介ブログとしてはかなりメジャーだと思います。 紹介しているアイテムのジャンルも数も多くて、目移りしてしまいます。 サイトデザインも細かいところまで作り込まれていてステキです。リスペクト。 ■雑貨kUkan 古くから運営されているので、3/27現在で投稿数が1956個。 インテリア関連だけでなくファッ
[Think IT] 第1回：Webデザイナーはイラストが描けて当然？ （1/3）
このドメインは お名前.com から取得されました。 お名前.com は GMOインターネットグループ(株) が運営する国内シェアNo.1のドメイン登録サービスです。 ※表示価格は、全て税込です。 ※サービス品質維持のため、一時的に対象となる料金へ一定割合の「サービス維持調整費」を加算させていただきます。 ※1 「国内シェア」は、ICANN(インターネットのドメイン名などの資源を管理する非営利団体)の公表数値をもとに集計。gTLDが集計の対象。 日本のドメイン登録業者(レジストラ)（「ICANNがレジストラとして認定した企業」一覧（InterNIC提供）内に「Japan」の記載があるもの）を対象。 レジストラ「GMO Internet Group, Inc. d/b/a Onamae.com」のシェア値を集計。 2023年5月時点の調査。
良品計画 金井政明専務 (坂井直樹のデザイン経営談義)：NBonline(日経ビジネス オンライン)
雑貨から家具、家電、衣料品など様々な商品を販売する無印良品を展開。日々の生活を支える「裏方製品」にデザインを持ち込んだ。3月から高価な商品をアイテムに加え、メリハリある生活を提案している。 坂井： 最近、湾岸地域の新築マンションに引っ越したのですが、毎日のように数多くの世帯に無印良品の商品が届けられています。その光景を見て、日本中の世帯には、収納なり文房具なり、なにがしかの無印の商品があるのではないかと感じています。 金井： 無印良品はアイテム数だけで7000以上ありますから、確かに何かはあるかもしれません。ただ、都市型のブランドなので、地方ではまだまだという気がします。 坂井： アイテム数は7000を超えますか。住宅まで販売していますからね。 金井： 元々は生活雑貨から始まり、それを収めるための箱や棚などに広がっていきました。住宅を販売するようになったのもその延長線上です。住宅をスケルト
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
サービス終了のお知らせ
無料で使えるデザイン系ソフトいっぱい - DesignWalker
高品質のウェブデザイン用無料素材がダウンロードでき、共有できるサイト -Freebie Pixels
http://www.loaps.com/