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

デザインの記事一覧

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

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

もっと見る

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を実行したところです。グリッドが表示...

List

  • 2016/12/08

Origami Studio - UXを試せるプロトタイピングデザインツール

スマートフォンのデザインで面倒なのが、UIは確認できてもUXが確認できなことです。タップした時にどういったアニメーションをしながら表示されるのか、どういう画面遷移をするのかが画面ごとに分かれたデザインではピンとこないかも知れません。そこで使ってみたいのがOrigami Studioです。Facebook製のプロトタイピ...

List

  • 2016/11/28

Grade.js - 画像を解析して最適な枠を表示

画像は見せ方がとても大事です。ただ並べただけでは目を引くことができません。例えばPinterestがあれだけ流行ったのは、それまでになかった段違いな組み合わせのグリッドによるところが大きかったでしょう。画像を主体としているサイトでは特に見せ方に注意すべきです。今回紹介するGrade.jsは画像に枠をつけてくれるJava...

List

  • 2016/11/18

Lighthouse - Progressive Web Appsに即しているか解析&点数表示

Progressive Web Appsというキーワードは2015年くらいに出てきましたが、スマートフォン向けのWebサイトを筆頭として、よりアプリ風なUI/UXが求められるようになっているのは確かです。レスポンシブはもちろん、画面遷移やタップした時のアニメーションなども求められるでしょう。自分の作っているWebサイト...

List

  • 2016/11/02

feathericon - シンプルで分かりやすいSVGアイコン

スマートフォンが高解像度になるにつれて、アプリリソースになる画像もどんどん肥大化する傾向にあります。このままでは巨大な画像リソースばかりになってしまうでしょう。そこで注目したいのがSVGやアイコンフォントです。今回紹介するfeathericonはSVG/アイコンフォントも提供されたシンプルなアイコンセットです。## f...

List

  • 2016/11/01

Wing - ミニマムなレスポンシブWebフレームワーク

Webデザインフレームワークは二極化が進んでいます。一つはBootstrapに代表される大型でリッチなフレームワークです。非デザイナーであればこの手のフレームワークが便利です。もう一つはごく基本的な機能だけを提供するミニマムなフレームワークです。こちらはデザイナー向きです。今回紹介するWingは後者のフレームワークです...

List

  • 2016/10/28

driveway - CSSだけで作られたMasonry

Pinterestで表示で一躍人気になったのがMasonryと言われる表示です。幅は固定しつつ、高さをずらして表示することで変化による印象付けを与えられます。女性向けのメディア、写真を多用するサイトで使われています。多くがJavaScriptを使って表現するのですが、今回紹介するdrivewayはCSSだけで実現されて...