デザインの記事一覧
ColorPicker - 十分な機能を備えた小型カラーピッカー
画像編集をする際、HTMLを編集する際などカラーピッカーが欲しくなることがよくあります。そのために画像編集ソフトウェアを立ち上げたり、別なソフトウェアを立ち上げてカラーピッカーを選択するのは面倒です。多くのソフトウェア付随のカラーピッカーはそのソフトウェア外の抽出に対応していなかったりします。そこで使ってみたいのがCo...
Wikipedia Dark - Wikipediaをよく使う人こそぜひ！
ダークモードに注目が集まっています。元々エンジニアはエディタのテーマなどを暗く設定することが多かったですが、それが通常のアプリはもちろん、Webサイトにまで広がってきました。目の疲れを軽減したり、集中できる、暗い場所でもコンテンツが読みやすくなると言ったメリットがあります。そんなダークモードをWikipediaに適用す...
Debucsser - CSS情報を可視化してデバッグをサポート
CSSは非常にデバッグしづらい技術です。多少間違っていても動きますし、余分にあっても気づきづらいものです。Webサイトを更新するのに伴って、不要なCSSが蓄積されていたなんて話もよく聞きます。そんなCSSのデバッグに使ってみたいツールがDebucsserです。クラスやIDを可視化してくれます。## Debucsserの...
Dark Reader - どんなサイトでもダークモードに
macOS Mojaviやスマートフォンで取り入れ始めているダークモード。目の疲れを軽減したり、ハイライトを高めることで可読性を高める、電力消費量を抑える効果があります。次のSafariではダークモードが実装され、Webサイトでもダークモードが取り入れられるようになります。今回紹介するDark Readerはそんなダー...
Vuetify Theme Generator - Vuetifyのカラーリングをビジュアルで設定
Vue向けに開発されているUIフレームワーク、Vuetifyは人気があります。UIコンポーネントも多く、サポートされているWebブラウザも幅広くなっています。しかしVuetifyを自在にカスタマイズできるデザイナーの方はまだ多くなく、Vuetify標準のUIに寄ってしまいがちです。そこでせめて色だけでもカスタマイズしま...
minstyle.io - ミニマムながら十分なCSSフレームワーク
Webデザインを行う際に、スクラッチではなく何らかのフレームワークをベースにするケースが増えています。そんな時、あまり多機能なものを使うとデザイン全体が引きずられてしまったり、ちょっとしたカスタマイズがうまくいかなかったりします。そこで使ってみたいのがあまり多機能ではなく、ちょっと気の利いたシンプルなCSSフレームワー...
PSone.css - プレイステーション風UIを再現するCSS
なぜ人は古いものに憧れとさえ言える感情を抱くのでしょうか。世の中はどんどん便利に、新しいテクノロジーも次々と登場しているにも関わらずです。懐古、アンティーク、ノスタルジックなど様々な言い方で古き良きものを振り返ろうとします。以前はファミコン風のUIを再現するNES.cssを紹介しましたが、今回はそれにインスパイアされた...
Vue-CRM - Vueを使ったCRMテンプレート
社内システムはバックオフィス向け、または営業向けのシステムになります。営業向けのシステムとして最も有名なのはCRMでしょう。顧客との関係性を向上させることによって、よりきめ細かいフォローアップや売り上げ増につなげられるようになります。そんなCRMを自社開発するといった場合に使えそうなVueテンプレートがVue-CRMで...
NES.css - ファミコン風サイトになるCSS
コンピュータはどんどん進化しており、より繊細なグラフィックス、リアルに近づく3D、臨場感あふれるサウンドといった具合に私たちを引きつけ続けています。そんな中、初代ファミコンもまた人気を持ち続けています。8bitでレトロ、とても今のコンピュータとは比較にならない代物であるにも関わらず、今なお多くの人たちを魅了しています。...
ProjectVisBug - HTMLやCSSの情報をビジュアル的に確認、調整
Webサイトのデザインを作っていて、配置を少し変えたり、色合いを変えたいと思うことは多いでしょう。開発者ツールでCSSを変更したり、Webブラウザを再読込しても良いですが、細かい調整では時間がかかってしまいます。そこで使ってみたいのがProjectVisBugです。ビジュアルを細かく調整できるGoogle Chrome...
Gmail Classic - Gmailのデザインを旧来のものに戻す
ソフトウェアの進化は決して悪いものでもありませんが、使い慣れてしまっていると従来の手法が使えなくなって生産性が落ちてしまうことがあります。Webサービスの場合、多くは強制的なアップデートであり、古いバージョンを使い続けられないのが不便です。今回紹介するGmail Classicは新しくなったGmailのUIを以前のもの...
Vue Dark Mode - Vueのダークモード用デザインテーマ
macOS Mojaveで取り入れられたダークモード。元々その手のユーティリティはたくさんありましたが、OS標準に入ってきたのが大きなインパクトです。それに伴ってダークモードへの注目が集まっています。近くリリースされるSafariではダークモードがサポートされるそうです。そんな時に使えそうなのがVue Dark Mod...
Eva icons - 480種類以上の綺麗なアイコン集
アイコンはWebサイトやアプリなどの使い勝手を決定づける重要な存在です。統一されたアイコンを使っているかどうかは大きな問題であり、そのためにも多数のパターンに対応したアイコン集の利用が求められます。今回は480種類を越えるアイコンを収録したEva iconsを紹介します。## Eva iconsの使い方PNG版を紹介し...
Sketch2Code - 手書きのスケッチからHTMLデザインを生成
アプリやWebサイトの企画を行う際には、まず紙やホワイトボードに手書きのラフを作ると思います。入力欄なども大ざっぱに決めて、みんなで話し合うでしょう。最近ではラフを写真に撮って、アプリの導線を確認できるサービスもあります。今回はさらにその一歩先、ラフデザインをHTMLにしてくれるSketch2Codeを紹介します。##...
Zendesk Garden - Zendeskで使われているデザインコンポーネント
Zendeskと言えばWebベースのサポートデスクを提供するクラウドサービスですが、他にも様々なビジネス用サービスを提供しています。彼らのサービスは業務用ながらも旧来とは異なるデザインで使い勝手が良いのが特徴です。デザインポリシーも従来のものとはまったく違うのでしょう。そんなZendeskの各サービスで使われているデザ...
Twemoji - Twitter製の絵文字集
AppleやAndroidなど各社が絵文字を作成していますが、それはOSに限りません。例えばFacebook、Slack、Twitterなども絵文字を利用します。その際には彼ら独自の絵文字も使われます。今回紹介するTwemojiはTwitter社がオープンソースで公開した自社の絵文字になります。## Twemojiの使...
React Site Nav - Stripeにインスパイアされたメニュー表示
良いデザインは真似してみると、その良さやエッセンス、理由などが見えてくるものです。細部にまでこだわったデザインはやはり美しく、使いやすいUIやUXになるものでしょう。今回はReact Site Navというライブラリを紹介します。Stripeのメニューを真似したUIコンポーネントです。## React Site Nav...
StyleURL - CSS設定をGistで共有するデザインカスタマイズ機能拡張
開発者ツールを使うと任意のWebサイトに対してスタイル設定を変更できます。可読性を下げる要素を削除したり、並び替えたりすることもできます。Styusのような機能拡張を使えば、サイトを訪問した際にデザイン設定が自動的に適用されます。今回紹介するStyleURLも類似のソフトウェアですが、スタイル設定の作りやすさとシェアの...
CssGitHubWindows - GitHubにWindowsのデザインを適用したら…
GitHubがMicrosoftによって買収されたことによってどんな変化が起きるのか心配している人は多数います。無茶なことはしないと思いますが、それでも緩やかな変化は起こるかも知れません。もしかしたらこんな変化が起きるかも、というのがCssGitHubWindowsです。ジョークですが、意外と良くできています。## C...
BoxIcons - シンプルで使いやすいアイコンセット
テキストによる説明よりもアイコンの方が分かりやすいケースは多いです（逆もありますが）。アイコンは言語を超えて使えるので、多言語対応しなければならない場合にもほぼ同じものが使えます。今回は400を超えるシンプルなアイコンセットを提供するBoxIconsを紹介します。## BoxIconsの使い方一例です。単色で分かりやす...