丸よりも丸みを感じる!? スーパー楕円の魅力とデザイン | Spinners Inc.
こんにちは、Spinners の元山 (@kudakurage) です。 最近はresize.fmという緩めのデザイン系ポッドキャストを @dex1t と始めて、オーディオ系のデバイスや仕組みについて勉強する毎日です。今のポッドキャストの収録環境についても近々書き残しておこうと思っています。 2021年1月に日本で話題になった音声SNS「Clubhouse」についてresize.fmでも取り上げて話したのですが、その中でも話しているスーパー楕円というものについて今回は詳しく書いていこうと思います。 INDEXピート・ハインのスーパー楕円スーパー楕円とデザイン建築や家具のデザインデジタルプロダクトのデザインスーパー楕円を利用した印鑑スーパー楕円の描き方数式を使った描き方（Adobe Illustrator）簡易的な描き方（Vector Draw Tool）ピート・ハインのスーパー楕円 Sou
iPhone 12系統のレスポンシブ対応のメモ書き
今朝発表されたiPhone 12系統のレスポンシブ対応についてのメモ書き。取り急ぎ。 12 Pro Max 👉 428px (3x) PlusシリーズやXR,11,11 Maxの414pxよりも14px広い。 12 / 12 Pro 👉 390px (3x) 6〜8、Xや11 Proの375pxよりも15px広い。 12 mini 👉 360px (3x) ただし、miniの場合は375pxで描写してスケーリング表示するらしい？ とは言え、Androidのデバイスの多くは360pxなのでiPhone 12 miniの描写サイズが375pxだろうが360pxだろうが関係なかったりします。 横幅360pxでしっかり表示されていることは必須条件です。 追記1：これからも4インチ(320px)を意識する必要はあるのか？ 個人的見解ですが、あります。 理由としてはiPadのSlide Over
ホットリンクのサイトリニューアル戦略資料を公開（8,000字の解説付）｜#ホットリンク
最終更新日：2019年12月20日 どうも、ホットリンクCMOの飯髙です。 2019年12月16日に、弊社（ホットリンク）のコーポレートサイトをリニューアルしました。 このリニューアルは、BtoBに強いWeb制作会社である株式会社ベイジさんにお願いしました。目に見える変化はもちろん色々あると思いますが、ここでは見た目だけでは分からない、サイトリニューアルの検討プロセスや背景にある意図などを、ベイジさんが作ったサイト戦略資料を元に、詳しく解説していきたいと思います。 ※全スライドはページの最後に掲載しています。 ※当記事はベイジの枌谷さんとの共同制作です。 ※提案資料は提案当時のものをあまり変えず公開しています。古い情報や誤字脱字などが含まれているかもしれませんが、ご了承ください。 旧サイトの課題とベイジさんを選んだ理由 リニューアル前の私たちのコーポレートサイトには、主に以下のような問題が
PhotoshopとIllustratorのほぼ全機能を搭載したAdobe XD並みに軽いプロトタイピングツールが発売
私は ある出来事 をきっかけにAdobe製品をやめて他社の製品でWebデザインをしようと考えていました。 最初に考えていたのがPhotoshopの代わりにAffinity Photo、Illustratorの代わりにAffinity Designer、そしてAdobe XDの代わりにSketchまたはFigmaのようなプロトタイピングツールを使用しようと考えていました。 最初はこうしようと思っていた しかし、さまざまな可能性を試した結果、今までPhotoshopとIllustratorとAdobe XDの3つのアプリでおこなっていたことをたった1つのアプリで完結させることができ、しかもあらゆる作業をAdobe XD並みの速度でできる方法があるという事に気づきました。 たった1つのアプリで完結させることができるという事に気づいた ここ最近はたった1つのアプリでWebデザインを完結させるワーク
5 Keys to Accessible Web Typography
Home / Articles / 5 Keys to Accessible Web Typography Matej Latin ~ 14 min read I wrote about fluid web typography in last month’s blog post and I realised that a lot of the popular implementation techniques come with accessibility issues. So I wanted to go back and revisit the basics and the best practices of accessible web typography. I think it’s safe to claim that a large part of website acces
UIのお作法。28個の「〇〇できそう感」をまとめました。｜maiokamoto
UIデザインにおいて「〇〇できそうな感」を出すことは、非常に大切です。予測される動作や意味が、自然に理解できれば、ユーザーにとって優しいデザインになるんじゃないかと思います。アイコン、大きさ、色などなど、デザインは細かい要素の積み重ね。すでに多くのユーザーに浸透し、習慣化されていそうな「〇〇できそう感」を28個まとめました。 １、進めそう感 ２、戻れそう感 ３、進めそう＆戻れそう感 ４、開きそう感（ドロップダウン） ５、開きそう感（アコーディオン） ６、開きそう感（モーダル１） ７、開きそう感（モーダル２） ８、カレンダーが開きそう感 ９、メニューが開きそう感（ハンバーガー） １０、検索できそう感 １１、入力できそう感 １２、検索できそう ＋ 入力できそう感 １３、パスワード入力できそう感 １４、パスワード感（強め） １５、間違えた感（エラー） １６、合ってる感（OK） １７、電話かかる感
論理的Webデザインの法則 - コムテブログ
TL;DR 流行りを取り入れ、デザインの基本原則や配色などルールを守っているのに、パッとしないレイアウトになる。それは論理的にデザインを捉えてないからです。今回はユーザーが理解しやすい Web デザインのレイアウトを作る法則を書きました。 論理的に考えるサイトデザインの法則 論理的思考をデザインにあてはめると、誰が何と言おうと以下のようになります。 ファーストビューに主張があること デザインに根拠がある（なぜ、斜めなのか。なぜ、スプリットスクリーンなのか） サイト全体を通して、意味がつながっていること 僕が実践しているレイアウト構築方法を解説していきます。 ファーストビューに主張がある スクロールせずに見える範囲の写真やキャッチコピーに理解しやすい主張があること。ここでいう主張とは結論のことです。ファーストビューだけで「何が言いたいのか」理解できないと、混乱を招きます。 ただ「かっこいい」
Googleの新ツールが便利すぎる！デザイナーやディレクター向けの新しいデザインツール -ProjectVisBug | コリス
VisBugはChromeの機能拡張で、ブラウザに表示したページのデザインやコンテンツを検証・編集できます。グリッドの確認はもちろん、要素を移動させたり、入れ替えたり、別の画像にしたり、テキストを編集したり、カラーを変更したりなど、さまざまなアイデアを実行・テストすることができます。 制作や検証時だけでなく、クライアントとの打ち合わせ、社内ミーティングなど、活躍するシーンがたくさんある便利ツールです。 VisBug -GitHub VisBugの特徴 VisBugのインストール VisBugの機能 VisBugの特徴 VisBugはChromeの機能拡張で、デベロッパーツールのデザイナーやディレクター向けという感じです。開発者のAdam Argyle氏は、Googleの現役UXエンジニア。 機能拡張なので、使うのは簡単です。 Chromeで当ブログを表示し、VisBugを起動してみました。
Wixのテンプレートに学ぶソフトモーションなどのデザイントレンド
あなたはフラットデザインが好きかもしれませんが、美しく魅力的なWebサイトを作るにはさらに良い方法があります。それは、ソフトモーションです。この方法は、ユーザーを一瞬で夢中にさせることができます。 数年前、フラットデザインがWebデザインにおける一番のトレンドになる以前のことです。私たちは腹を立てていました。なぜなら、その当時のWebサイトは見た目は似通ったものばかりで、どれもパッとしないものだったからです。もちろんその責任はデザイナーの私たちにありましたし、今もあり続けています。 その後、もう一度デザインで遊び始めたWebデザイナーが現れました。余白やグラデーション、マイクロインタラクション、モーションなどを求め続けるデザイナーもいました。私たちは、再び可能性を見つけたのです。 フラットデザインの問題点は、ミニマリズムの哲学に起因します。ミニマリズムは包括的に徹底されるべきです。実際、フ
【2018年版】Webデザインの最新トレンド5選
Windows8が登場した2012年以降、Webデザインに関する話題においてフラットデザインという用語をよく耳にするようになった。 AppleもiOS7を発表した2013年からは、従来使われていたスキューモーフィズム、つまり物理的なアイテムに似せたデザインをやめ、フラットデザインを採用している。 iOS6, 7 これらにより多くのWebサイトに影響を与えたフラットデザインは、現在多くのWebサイトで見かけるようになったが、Webデザイン界ではこれに限らず毎年クリエイティブなデザインが生まれ続けている。 この記事では、2017年後半に見られたクリエイティブなWebデザインのうち、2018年も引き続きトレンドとして見られるであろうものを紹介する。 【トレンド①】モバイルファースト アクセス解析ソフトを提供しているStarCounterによる世界のブラウザ定点観測の調査によると、2016年11月
圧巻！個性が爆発している超絶技巧サイト6選 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
どうもです！ ダンサー兼フロントエンドエンジニアのシスコです！ 最近、すっかり暑くなってきましたね！ 暑くて体がだるくなってきそうです。。。 今はそんなにですけど、よく「チョコモナカジャンボ」を2、3個ほおばりながら帰ってたころが懐かしいですね……。 そんなこんなで、今回はアニメーションの参考でWebサイトを漁ってるときに見つけた、個人的にオモシロい・イケてるなって感じたサイトを挙げてみます！！ ドラマの世界観をゲームで体感！「守り人クエスト」 守り人クエスト-精霊の守り人 NHK ONLINE 綾瀬はるかさん主演のNHK大河ファンタジー「精霊の守り人」の世界をゲームで体感できるサイトになってます！ 人生ゲームのように数字の書かれたルーレットを回して、ひたすら異形の者からマップを駆け回って逃げるというゲームです。先に進めば進むほど、異形の者の進むマスが増えるのと、分岐部分で分裂してくるので
ビジュアルデザインに必要な10の基本原則まとめ
ビジュアルデザインを学ぶうえでもっとも基本的なルール、原則10個を、現役ビジュアルデザイナーの José Torre が詳しく紹介しているので今回はご紹介します。 ずっと使える、デザインの基本まとめました。【2020年改訂版】 ビジュアルデザインに必要な10の基本原則まとめ #1 ポイント、ライン、シェイプ 点（英: Point）、線（英: Line）、形（英: Shape）は、どんなデザインにおいてもっとも基本的な構成要素です。シンプルなアイコンから複雑なイラストまで、これらの要素を組み合わせることでどんなデザインでも作成できます。 幾何学（英: Geometry）としては、ポイントはX座標とY座標の組み合わせで、Z軸を追加することで3Dになりますが、今回は２次元デザインについて詳しく知りましょう。 ふたつのポイントをつなげると線になり、無数の点でできた線を組み合わせることで、どんな形で
CSSの引き出しを増やしておこう！最近見かけたスタイルシートのアイデア・テクニックのまとめ
最近のWebサイトやスマホアプリで見かけるテクニックをはじめ、Web制作者としてよい刺激になるスタイルシートを巧みに使ったさまざまなアイデアを紹介します。 イラスト: Girls Design Materials CSSのみで実装されているのものもたくさんありますが、JavaScriptやSVGなどを必要に応じて使用されているものもあります。
Webサイトのヘッダー/フッター用アイデア満載！コピペできるHTML/CSSスニペット48個まとめ
ウェブサイトを訪れたとき、まずユーザーが目にする「ヘッダー」部分は、魅力的なデザインコンセプトを取り入れることで、オリジナル性の高い表現が可能になります。 今回は、魅力的なヘッダー/フッターデザインを実装できる、コピペ可能なHTML/CSSスニペット48個をまとめてご紹介します。ブログ記事向けレイアウトやランディングページ向けなど、5つのカテゴリに分けています。用途に応じて最先端のWebデザインテクニックを活用し、デザインの参考にしてみてはいかがでしょう。 2017年大本命！HTML/CSSで表現できる、参考にしたいカード型レイアウト60個まとめ コピペで利用可！思わず押したくなるボタンエフェクト用HTMLスニペット40個まとめ 【2017年版】HTML/CSSで表現できる、すごいテキストエフェクト66選 コンテンツ目次 1. 記事向けヘッダーデザイン 2. 記事向けフルスクリーン・ヘッダ
ウェブデザイナーが配色に困らない、実践向き無料カラーツール14個まとめ
配色は、デザイナーが扱うツールキットの中でも強力なアイテムのひとつで、習得するのが難しいコンセプトでもあります。 可能な色の組み合わせは無数にありますが、ウェブサイトやアプリで使用する色を決めるときに悩んでしまうこともしばしば。 デザイン作業を簡単にする、配色カラーパレット作成に適した無料ツールをまとめてご紹介します。制作時間の短縮につながる実践的なツールの使い方を学びましょう。 【2021年版】もう配色デザインには迷わない！すごい無料カラーパレットツール83個まとめ コンテンツ目次 1. インスピレーションの見つけ方 2. 色彩配色の決め方 3. カラー・アクセシビリティ 01. インスピレーションの見つけ方 自然から デザインのアイデアやインスピレーションになるものは、すでに自分のまわりにたくさんあります。ぐるりと周囲を見回してみましょう。プリントデザイン、インテリア、ファッションなど
有名サイトの事例から学ぶ12のWebデザイン・レイアウト
ユーザーはデザインを見たいのではなく、コンテンツを求めてサイトにアクセスします。Web UI Patterns 2016 Vol. 1で説明した通り、デザインは直感的で分かりやすくコンテンツを表示するための手段にすぎません。 この記事では、Webにおける12通りのレイアウトのパターンを実際の例や良い実践方法、共通のシナリオを通して見ていきます。 1. カード 2. グリッド 3. マガジン 4. コンテナの不使用 5. スクリーン分割 6. シングルページアプリケーション（SPA） 7. Ｆパターン 8. Ｚパターン 9. 水平的なシンメトリー 10. 水平的なほぼシンメトリー 11. 放射線状のシンメトリー 12. アシンメトリー 1. カード
2017年これからのWeb制作業界の流れ、注目されているテクニックやツール、Webデザインのトレンドなどのまとめ
数多くのブログで2017年のトレンドをさまざまな切り口でポストしているので、その中から特に印象的で共感がもてたものをまとめて紹介します。 注目キーワードは、コンテンツファースト、レイアウトの多様化、フラットデザインやミニマリズムの進化、アニメーションの重要性、コミュニケーション・コラボレーション、AR/VR。 2017年のトレンドカラーは、フレッシュなグリーン。 参考: 2017年のトレンドカラー「グリーナリィ」と春のトレンドカラー10色 2017年、Webデザインのトレンド 2016年に人気が高かったインターフェイスのデザイントレンド 2017年、Adobe社のデザイン予測 2017年、Web制作業界全体の流れ 2017年、注目されているデザイナー・デベロッパーのツール 2017年、WebデザインのUIにおけるトレンド 2017年、Webデザインのトレンド まずはWebデザインのトレンド
【2017年版】「とりあえず背景は白」から卒業しよう！Webデザイン5つの背景トレンド
Web上を見渡せば白やそれに近い背景色を用いているWebサイトが圧倒的に多いですが、本稿でご紹介する5つの背景スタイルはここ最近の新しいトレンドを踏まえた事例となっています。 Webデザインでは背景が変わるとガラッと全体の印象を変えることができます。もちろん「背景は白一択！」なデザインが悪いわけではありませんが、これからご紹介する背景のトレンドを取り入れることで、これまでとは全く印象の違うWebデザインができるようになるかもしれませんよ！ Webデザインの背景トレンド5つ 1.写真と幾何学模様の融合 ヒーローイメージ(※編集註：画面を覆い尽くすような大きなサイズの写真を用いたWebデザイン、メインビジュアルのこと)やイラストを背景に利用するのは最も人気のある方法の１つで、大きなイメージは訪問者の興味を惹くのにとてもいい方法です。 さらにこのヒーローイメージの背景をより効果的にするには、目的
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Top 9 Design Trends for 2019 That Will Push Your Business Further
ユーザーインターフェイス解剖学（公開版）
