デザインの記事一覧
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の使い方一例です。単色で分かりやす...
GitHub XP - GitHubをWindows XP風に
GitHubがマイクロソフトに買収されました。かつてのマイクロソフトとは違うとはいえ、Skypeのことを思うと一抹の不安を拭えずにはいます（CEOも代わるので）。今後数年は色々あるかも知れません。そんなGitHubをWindows XPにしてしまうデザインテーマがGithub XPです。## Github XPの使い方...
TODC Bootstrap - Google風のBootstrapテーマ
Bootstrapの良いところは簡単にある程度デザインが整ったサイトが作れるだけではありません。多彩なテーマが作られていることで、あっという間にサイトの雰囲気を変えられるのも魅力です。今回はそんなテーマの一つ、TODC Bootstrapを紹介します。Google風なサイトが作れるBootstrapテーマです。## T...
Wired Elements - ラフなデザインになるカスタムタグ
ワイヤーフレームなど、ラフに作りたいという時は手書きなどが向いています。それをドローのソフトウェアなどできっちりと書き始めてしまうと、些細な部分にこだわってしまって目的であるプロトタイプがなかなか作れなかったりします。そこで使ってみたいのがWired Elementsです。Web上でラフなデザインを再現できるWebコン...
PatternFly - Red Hat製のWeb UIフレームワーク
HTMLは自由度が高い反面、何でも自分でイチから作らなければならないイメージがあります。そのためUI、JavaScriptフレームワークは貴重です。それらを使うことで効率を大幅に高められます。今回紹介するPatternFlyはUIフレームワークで、Red Hat社によって開発されています。## PatternFlyの使...
Vue Designer - Vue.jsの表示を確認できるVisual Studio Codeプラグイン
ReactやAngular、Vueなどは独自のタグを使ったWebコンポーネント型のシステムと言うこともあって、これまでのHTMLデザインの手法が通じなくなっています。デザインの確認などで苦戦している人も多いのではないでしょうか。そこで使ってみたいのがVue Designerです。Visual Studio Codeプラ...
vuegg - Vue.jsプロジェクトの画面を作成
ReactやVue、AngularといったJavaScriptフレームワークはHTMLを再定義しており、UIを作るのもそうそう簡単ではありません。デザイナーとの協業も難しく、苦戦している方も多いのではないでしょうか。そこで使ってみたいのがvueggです。Vueの画面をWYSIWYGに設計できるソフトウェアです。## v...
ClassicKit - iOSにクラシカルなデザインを
iOSは最新のUIを持っていますが、時にクラシカルなUIに戻りたいと思うことがあるかも知れません。ちょっと古いくらいだと残念な感じですが、20年以上前だと逆に新鮮に感じることだってあります。そこで使ってみたいのがClassicKitです。iOS上で使えるWindows95風のUIライブラリです。## ClassicKi...
Hyperion-iOS - iOSアプリのデザインレビューをサポート
デザインの優劣を判断するのはとても難しいです。特にアプリのようにアニメーションまで絡んだりすると、何をもって正しいと考えるかは千差万別になります。ちょっとした動きが気にかかる人もいれば、そうでない人もいることでしょう。そのデザインをレビューする際に使ってみたいのがHyperion-iOSです。アニメーションをゆっくりに...
Sufee Admin - Bootstrap4対応の多機能ダッシュボードデザインテンプレート
Bootstrap4がそろそろ本格的に導入されるようになっています。後方互換性がないため、これまでのテンプレートが使えなくなってしまったのが残念です。しかし、これによって新しいチャンスが生まれたとも言えるでしょう。Sufee AdminはBootstrap4向けの管理ページテンプレートになります。今後のことを考えるなら...
Shards - Bootstrap4に対応したデザインテーマ
Bootstrapは有名なUIデザインフレームワークですが、先日バージョン4が正式にリリースされました。その結果、これまで使われてきた多くのテーマが使えなくなっています。3を使い続けても良いですが、徐々に情報は増えていくのでバージョン4を追いかける方が良いでしょう。ということでテーマも新しいものに乗り換える必要がありま...
Bootstrap Page Builder - Bootstrapを使った画面設計ツール
WebのUIは自由度が高い分、イチから作るのは手間がかかります。そうした状況だからこそ、Bootstrapのように見栄えの良いUIが作れるフレームワークに人気が集まりました。しかし、Bootstrapの記法に沿ったHTMLの手打ちすら面倒に感じてきます。そこで使ってみたいのがBootstrap Page Builder...
Arakawa Template - シンプルで実用性の高いWebテンプレート
Webデザインは多彩ですが、多くの機能は他のWebデザインでも使われているものです。例えばレスポンシブWebデザインへの適用は大抵のWebサイトで実現されており、イチから作る必要はないでしょう。WebデザインもDRYの考えが大事です。そこで使ってみたいのがArakawa Templateです。汎用的なWebサイトテンプ...
microlink.js - Webサイトのプレビュー表示を格好良く
最近、Webサイトのサムネイル表示を目にすることがよくあります。SlackでURLを投稿した場合、ソーシャルメディア、キュレーションサイトなど様々なケースで使われます。次に問題になるのがその見せ方です。サムネイルの画像を使ったり、サマリーの文字列をどう表示するかによってクリックされる可能性が変わってくるでしょう。そこで...