ITエンジニア/デザイナ向けにオープンソースを毎日紹介

デザインの記事一覧

プレミアムユーザー限定記事

MOONGIFTプレミアムは、月額500円の有料サービスです。詳細はこちらから

もっと見る

List

  • 2017/08/27

CSS Grid Highlighter for Chrome - CSS Gridをハイライト表示するChrome機能拡張

レスポンシブWebデザインの広がりに合わせて利用が広がっているのがグリッドベースのデザインです。そんな中、ついに登場したのがCSS Gridになります。Web標準だけで手軽にグリッドデザインが実現できるようになりました。そんなCSS Gridもまだまだ普及していない技術だけに手探り感があります。そこで使ってみたいのがC...

List

  • 2017/08/25

Slack Black Theme - Slackアプリを黒ベースのデザインに

コミュニケーションツールは一日に目にする機会の多いサービスと言えます。それだけに目を刺激しない、低刺激なデザインやカラーリングになっていると嬉しいでしょう。現在最も使われているであろうSlackについてはどうでしょう。プログラミングエディタは黒ベースなのに、Slackが白ベースだと目が痛くなってきます。そこで使ってみた...

List

  • 2017/08/22

o-grid - グリッドだけ提供するCSSライブラリ

最近のレスポンシブWebデザインを支えるのはグリッドデザインです。画面幅を幾つかに分割し(大抵12個が多いですが)、画面幅によってその内幾つのブロックを横に並べて表示するかを決定します。多彩なUIフレームワークと共に提供されることが多いですが、今回はごく基本的なグリッド機能だけ提供するo-gridを紹介します。## o...

List

  • 2017/08/21

VUESTIC - Vue.jsを使ったシステム管理画面テンプレート

Webサービスを作っていて、必要になるのが管理画面です。多くは開発工程の最後に回されて、予算もないために簡易的な画面で作られます。しかしより良い管理を行うためには管理画面もこだわりたいものです。今回はVue.jsを使った管理画面、VUESTICを紹介します。## VUESTICの使い方トップページです。アイコンが大きめ...

List

  • 2017/08/18

Ring UI - JetBrains製のUIコンポーネント集

Webアプリケーションを作る際に大事なのがUIです。Bootstrapのようなテーマもありますが、まだまだ足りない部品があることも多いでしょう。そうしたときに工夫すれば実装できるのか、または最初から用意されているのかで大きな違いがあります。今回紹介するRing UIはJetBrains社製のUIフレームワークになります...

List

  • 2017/08/15

CSS Browsers - CSSで作られたブラウザウィンドウ

GUIのWebブラウザの歴史は長いです。Mosaicの時代から考えるとすでに25年近いのではないでしょうか。その後NetscapeやFirefox、IE、Safari、Opera、Chromeなど様々なブラウザが誕生しました。そんなブラウザの遍歴をうかがい知れるのがCSS Browsersです。なんとCSSで作られたブ...

List

  • 2017/08/02

Chameleon.js - 画像からカラーパターンをピックアップ

Webサイトのデザインを考える上で色彩は重要なパーツです。それだけに慎重に選ばざるを得ません。同系色でまとめれば良いという訳でもなく、一見すると合わないような色合いでも意外とマッチするケースもあります。そんなカラーパターンを既存の画像からピックアップしてくれるのがChameleon.jsです。## Chameleon....

List

  • 2017/07/31

Sirius UI - Bootstrap/Vue.jsを組み合わせたUIデザインテンプレート

UIライブラリは幾つ知っておいても役立つものです。Webサイトの雰囲気に合わせてピックアップしたり、機能によって差別化もできるでしょう。すべての要件を一つのUIフレームワークで達成できる訳ではありませんので、色々知っておくとぴたりと当てはまる場面があるはずです。今回はSirius UIというUIフレームワークを紹介しま...

List

  • 2017/07/28

Kactus - デザイナー向けのGitクライアント

プログラマーはGitをはじめとするバージョン管理の恩恵を強く感じているでしょう。しかし開発に携わる方はプログラマーだけではありません。デザイナーだってもっとGitを使いこなしたいと思っているはずです。そんなデザイナーの中で、Sketchを使っている方にお勧めなクライアントがKactusです。## Kactusの使い方最...

List

  • 2017/07/25

Propeller - レスポンシブ/マテリアルデザイン対応の管理画面テンプレート

最近のWebデザインのトレンドはどんどんアプリ風に、複雑になっています。レスポンシブWebデザインによって、画面幅を意識したデザインになり、さらにマテリアルデザインによってユーザのアクションを意識するようになっています。これをすべて実装したサイトのデザインはとても難しいでしょう。そこで使ってみたいのがPropeller...

List

  • 2017/06/13

Mocka - モックアップの作成に使えそうなplaceholder

Webサイトのデザインを行う際などにとりあえずアテの画像が必要になることは多々あります。画像だけでなくテキストも必要でしょう。そうした時、あまり適当な文字だと実感がわきませんし、かといって作り込みすぎるのもよくありません。そこで使ってみたいのがMockaです。Mockaはシンプルで格好良いplaceholderを提供し...

List

  • 2017/05/16

Sizzy - 多彩なデバイスでのWebサイト確認を簡単に

Webサイトは一つのデバイスだけで見るとは限りません。特に最近ではPC、タブレット、スマートフォンなどあらゆる大きさのデバイスで閲覧します。そうしたデバイスでの表示確認をすべての実機でやるのは現実的ではありません。そこで使ってみたいのがSizzyです。多数のデバイス幅に対応したデザイン確認ツールです。## Sizzyの...

List

  • 2017/05/14

Let it snow - CSSでWebサイトに雪を降らせよう

Webサイトに雪を降らせるような効果をみせるライブラリは幾つか存在します。多くはJavaScriptを使ってごりごりと実装するのですが、あまりスマートなやり方とは言えません。今回紹介するのはLet it snow、スタイルシートを活用した降雪効果を見せるライブラリです。## Let it snowの使い方デモのWebサ...

List

  • 2017/05/12

Web Design Pirate - Webサイトの一部をピックアップして再利用

Webデザインはコンポーネント指向になってきています。Web componentsという仕様も作られており、さらにこの流れは加速するでしょう。Webサイトの一部を埋め込んだり、再利用性高い部品を使うのが当たり前になっています。そんなWebサイトの一部をピックアップするのに最適なGoogle Chrome機能拡張がWeb...

List

  • 2017/05/03

mini.css - 小さくても多彩なUIを提供するスタイルシートフレームワーク

CSSフレームワークはたくさん存在します。それぞれにコンセプトがあり、使いやすいものを選択するでしょう。特にUIパターンが多いものはデザイン的に統一感が出やすく、場当たり的に素材を探さずに済むので重宝します。今回はそんな多数のUIを揃えたCSSフレームワーク、mini.cssを紹介します。## mini.cssの使い方...

List

  • 2017/04/13

Onion Packer - デザイナー向け。テクスチャ管理ソフトウェア

プログラマーであればスニペット、デザイナーであればよく使うデザインを手元に置いておくのは大事なことでしょう。一つのフォルダに入れておいても良いですが、もっと一覧で分かりやすく管理したいと思うでしょう。そこで使ってみたいのがOnion Packer、テクスチャデザイン管理です。## Onion Packerの使い方メイン...

List

  • 2017/04/12

MockFlowFont - デザインに使えるモックフォント

Webサイトやスマートフォンアプリのモックデザインを作る際にはアテの文字を用意するのが一般的です。あああ、といったような適当な文字です。しかしあまり良い感じに仕上がらないこともあります。そこで使ってみたいのがMockFlowFontです。文字ではなく、単なる棒線のフォントです。## MockFlowFontの使い方実際...

List

  • 2017/04/04

Propeller - Bootstrapベースのマテリアルデザインテンプレート

ちょっとしたWebサイトであればBootstrapをベースにすればデザインを一から作る必要がなくなっています。プロトタイプはもちろんのこと、数多あるBootstrap用テーマを使えば、十分高品質なWebサイトが作れるでしょう。今回はそんなBootstrapのテーマを紹介します。マテリアルデザインになっているPropel...

List

  • 2017/03/05

Luxbar - CSS3だけで実装されたレスポンシブなナビゲーションバー

JavaScriptが高機能になり、有効であるのが当たり前になるとちょっとしたアクションであってもJavaScriptで実現したくなります。しかし無効になっている場合やブラウザ間の動作誤差によってうまく動かない場合もあるでしょう。そういった不具合を防止するにはスタイルシートだけで実装するのがベストです。今回はCSSだけ...

List

  • 2017/02/06

formbase - 見栄えの良いフォームデザイン

Webの表現力はHTML5によって格段に上がりましたが、それもスタイルシートなどを駆使してデザインを行った場合に限ります。標準のままでは貧弱なデザインのままです。標準でももっと見栄えの良いデザインが欲しいのではないでしょうか。そこで使ってみたいのがformbaseです。ごくシンプルな指定で見栄えの良いフォームにデザイン...