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

デザインの記事一覧

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

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

もっと見る

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です。ごくシンプルな指定で見栄えの良いフォームにデザイン...

List

  • 2017/01/31

placehold-cli - placeholdのURL生成コマンド

デザインのプロトタイプを作っている時に便利なのがplaceholdです。パラメータに応じて画像の色を変えたり、画像自体の大きさを自由に変更できます。他にもフォントの大きさや色も変えられるのですが、パラメータをいちいち覚えておくのも面倒です。そこで使ってみたいのがplacehold-cliです。対話型でplacehold...

List

  • 2017/01/24

ColorMe - Webブラウザ上で色の調整

色を生み出すというのは大変なことです。ぴたりと当てはまる色がすぐにできあがれば良いですが、そうそう簡単にできるものではありません。だいたいの色を決め、そこから徐々に絞り込んでいくのが良いのではないでしょうか。そんな色の作成作業をサポートしてくれるのがColorMeです。様々な要素を使ってベースになる色を変化させられます...

List

  • 2017/01/12

jquery.diamonds.js - 菱形を並べたデザインをどうぞ

Webでの表現は基本的に四角が重なった形で表現されます。そのため、デザインする際の効率は良いのですが、そこから逸脱したデザインをしようと思うと途端に大変になります。例えば円形や菱形などです。今回紹介するjquery.diamonds.jsはそんなデザインが難しい菱形が連なったデザインを実現できるソフトウェアです。## ...

List

  • 2016/12/25

Radiobox.css - ラジオボタンに選択時のアニメーションを追加

フォームで選択した際に何のフィードバックもないと不安になってしまいます。文字を入力していれば分かりやすいのですが、マウスでクリックした時に適切なフィードバックは必要でしょう。今回はラジオボタンにおける選択時のアニメーションを提供するRadiobox.cssを紹介します。## Radiobox.cssの使い方前半の6つで...

List

  • 2016/12/11

X-RAY - Webデザインのお供に使いたいグリッド表示

Webデザインを行っていて、最終的な微調整はWebブラウザ上で実際に表示しながら行うでしょう。そうした時にほんの少しのずれなどを判断する際に画面に目を近づけるのは効率的とは言えません。ぜひX-RAYを使って見やすいWebデザインを行っていきましょう。## X-RAYの使い方X-RAYを実行したところです。グリッドが表示...