デザインの記事一覧
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を投稿した場合、ソーシャルメディア、キュレーションサイトなど様々なケースで使われます。次に問題になるのがその見せ方です。サムネイルの画像を使ったり、サマリーの文字列をどう表示するかによってクリックされる可能性が変わってくるでしょう。そこで...
Fish-UI - Vue向けのUIコンポーネント集
React/Angular/Vueといった新しい形のライブラリが登場したことで、これまで使えていたUIライブラリが使えなくなってしまいました。専用のタグを使っているため、それに合わせたUIデザインが必要になります。そこで、もしVueを使って開発を行っているならば使ってみたいのがFish-UIになります。## Fish-...
mofron - .NETやSwingのように画面デザインできるUIフレームワーク
Webは表現力が高い一方、その高さ故にゼロから作ろうと思うと手間に感じてしまいます。デザインをあまり気にしない業務システムであっても、素のHTMLままでは使う気にならないでしょう。そこで使ってみたいのがmofronです。.NETやSwingで作っているように、画面の設計をコードの中から行えるUIフレームワークです。##...
Dev Portfolio - 開発者向けポートフォリオテンプレート
フリーランス、個人事業主であれば自分のポートフォリオページを用意すべきです。そこでどんな技術を持っているか、職務経歴やこれまでに経験したプロジェクトなどをアピールしましょう。Dev Portfolioはそんなポートフォリオテンプレートの一つです。Dev Portfolioをベースに自分用にカスタマイズすれば簡単にポート...
ajsr-confirm - 豪華な確認ダイアログ
Webを作成する際にはWebブラウザが用意している標準のコンポーネントがよく使われます。しかし、その表示では満足できない人が多いのも確かです。そこでより使い勝手の良いデザインを追求し始めます。今回はダイアログです。独自のダイアログを出したいと思ったらajsr-confirmを参考にしてみてください。## ajsr-co...
Froala Design Blocks - コーポレートサイトやサービスサイトを作るのに使えるBootstrapコンポーネント集
Bootstrapを使ってWebサイトを構築する例は多いですが、凝ったデザインを考えると足りない部品が出ることがあります。また、色やサイズについてもっとこだわりたいと考えることもあるでしょう。そうした時に使えるのがFroala Design Blocksです。実に170を超えるデザイン要素を提供しています。## Fro...
CSS Grid Highlighter for Chrome - CSS Gridをハイライト表示するChrome機能拡張
レスポンシブWebデザインの広がりに合わせて利用が広がっているのがグリッドベースのデザインです。そんな中、ついに登場したのがCSS Gridになります。Web標準だけで手軽にグリッドデザインが実現できるようになりました。そんなCSS Gridもまだまだ普及していない技術だけに手探り感があります。そこで使ってみたいのがC...
Slack Black Theme - Slackアプリを黒ベースのデザインに
コミュニケーションツールは一日に目にする機会の多いサービスと言えます。それだけに目を刺激しない、低刺激なデザインやカラーリングになっていると嬉しいでしょう。現在最も使われているであろうSlackについてはどうでしょう。プログラミングエディタは黒ベースなのに、Slackが白ベースだと目が痛くなってきます。そこで使ってみた...
o-grid - グリッドだけ提供するCSSライブラリ
最近のレスポンシブWebデザインを支えるのはグリッドデザインです。画面幅を幾つかに分割し（大抵12個が多いですが）、画面幅によってその内幾つのブロックを横に並べて表示するかを決定します。多彩なUIフレームワークと共に提供されることが多いですが、今回はごく基本的なグリッド機能だけ提供するo-gridを紹介します。## o...