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

デザインの記事一覧

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

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

もっと見る

List

  • 2019/05/16

React95 - 懐かしのWindows 95のUIをReactで

Windows 95が発売してからすでに25年が経とうとしている事実。4半世紀前になるのです。その頃からMac派なのでWindows 95発売日の祭りはニュースで見た程度なのですが、PCの歴史が変わった瞬間でもありました。そんなWindows 95のUIを現在の技術、Reactで再現しようというのがReact95です。...

List

  • 2019/05/12

Ikonate - カスタマイズ重視のSVGアイコン集

SVGの良いところはXMLでベクターベースなのでJavaScriptからカスタマイズしやすいということです。色などはもちろん、表示する向きなども変えられます。拡大、縮小しても綺麗なのも嬉しいポイントです。そんなSVGアイコンとしてIkonateを紹介します。カスタマイズしやすいのが売りのSVGアイコン集です。## Ik...

List

  • 2019/05/11

Water.css - 読み込むだけでちょっと綺麗なデザインに

Webは自由度の高いプラットフォームです。WebブラウザはHTMLとCSSを使ってデザインするのが前提で、デザインしない時の表示は酷いものです。しかし、こったデザインをするのは時間がかかります。そこで使ってみたいのがWater.cssです。CSSファイルを読み込むだけで、ちょっと良い感じのデザインにしてくれます。## ...

List

  • 2019/04/14

natUIve - UIコンポーネントが多数揃ったCSSフレームワーク

WebのUIフレームワークとしてはBootstrap一強が続いています。しかしフレームワークとしての癖もあり、Webデザイナーとしては自分のやりたいデザインが実現しづらいかも知れません。そんな時には他のUIフレームワークに触れてみても良さそうです。今回はnatUIveを紹介します。デザインフレームワークとしてはもちろん...

List

  • 2019/04/05

Aafu - 開発者ならポートフォリオを作ろう

転職などの際に個人のポートフォリオがあるかどうかは大きな意味を持ちます。少なくとも私が面接する立場であればGitHubアカウントとそのリポジトリを見るでしょう。対外的にアピールしていない開発者は雇用されづらくなるはずです。そこで自分が何者であるかアピールできるポートフォリオサイトを立ち上げましょう。Aafuはシンプルな...

List

  • 2019/04/02

Pixel Picker - 小さなカラーピッカー

Webページのデザインやプレゼンテーションを作っている際など、画面上にある色をピックアップしたいと思うことがあります。そのために画像編集ソフトウェアを立ち上げたりするのは面倒です。そこで使ってみたいのがPixel Pickerです。独立したアプリケーションとして提供されるカラーピッカーです。## Pixel Picke...

List

  • 2019/04/01

Tech companies Logos In CSS

CSS3によって計算ができるようになったり、表現力が大幅に高まっています。CSS3を駆使することによって、イラストを描いたり、アニメーションも実現できます。もちろん、かなりの創意工夫は必要ですが単なる絵よりもインパクトがあります。今回紹介するTech companies Logos In CSSはCSSだけを使ってテッ...

List

  • 2019/03/12

RTS - レスポンシブにテキストサイズを変える

レスポンシブWebデザインは標準的に用いられるようになっていますが、多くは幅や表示する項目の並べ替えに特化しています。Web上に最も多いコンテンツはテキストである以上、もっとテキストに気を配るべきではないでしょうか。そこで使ってみたいのがRTSです。レスポンシブにテキストサイズを変更してくれます。## RTSの使い方B...

List

  • 2019/02/25

CSSans Pro - CSS製のフォント

最近はWebFontが流行っており、Web上で格好良いテキスト表現ができるようになっています。しかしWebFontの弱点としては、基本的に単色のみということです(合字で可能にする方法もあるようですが)。それでは表現力が片手落ちでしょう。そこで参考にしたいのがCSSans Proです。CSSで作られたフォントになります。...

List

  • 2019/02/24

mockup - Red製のモックアップデザインツール

Redというプログラミング言語があります。REBOLという言語にインスパイアされており、プロトタイプベースでマクロシステムを持っています。詳しくはRed Programming Language: About

List

  • 2019/02/16

Matter - ピュアなCSSで作られたマテリアルデザインコンポーネント

マテリアルデザインは単なるデザインにとどまらず、アニメーションも大事な要素になります。ユーザがタッチした、スワイプしたといったアクションに対して適切なフィードバックがあってこそです。そのため、デザインの敷居が高くなっています。そこで使ってみたいのがMatterです。ピュアなCSSだけで作られたマテリアルコンポーネントで...

List

  • 2019/01/24

bruck - コーディングベースのプロトタイプシステム

Webサイトのプロトタイプを作成する際には、こだわり過ぎないくらいのデザインに留めておくのが大事です。文字の大きさや画像の内容など、本来関係ない部分までデザインしてしまうと余計な議論に繋がりかねません。そこで使ってみたいのがbruckです。HTMLタグベースでプロトタイプをさくさくと作れます。## bruckの使い方左...

List

  • 2019/01/20

React Kawaii - React用の可愛いコンポーネント

Webコンポーネントの考え方を取り入れることで、Webサイトのデザインを再利用しやすくなります。実用的なコンポーネントもすでに出てきていたり、複雑な機能を可能にするコンポーネントを導入することでWebサイトを作りやすくなります。そんな中、今回はちょっと変わり種のコンポーネントReact Kawaiiを紹介します。Rea...

List

  • 2019/01/18

Slack Theme CLI - コマンドでSlackアプリのテーマを変更

Slackをデスクトップで使う場合、多くの人がSlackアプリを使っているのではないでしょうか。Webブラウザとは別プロセスで実行できるのが便利ですが、長時間利用する上で、白い画面では目が疲れてしまいます。そこで使ってみて欲しいのがSlack Theme CLIです。Slackのテーマを変更できるCLIコマンドです。#...

List

  • 2019/01/16

ColorPicker - 十分な機能を備えた小型カラーピッカー

画像編集をする際、HTMLを編集する際などカラーピッカーが欲しくなることがよくあります。そのために画像編集ソフトウェアを立ち上げたり、別なソフトウェアを立ち上げてカラーピッカーを選択するのは面倒です。多くのソフトウェア付随のカラーピッカーはそのソフトウェア外の抽出に対応していなかったりします。そこで使ってみたいのがCo...

List

  • 2019/01/13

Wikipedia Dark - Wikipediaをよく使う人こそぜひ!

ダークモードに注目が集まっています。元々エンジニアはエディタのテーマなどを暗く設定することが多かったですが、それが通常のアプリはもちろん、Webサイトにまで広がってきました。目の疲れを軽減したり、集中できる、暗い場所でもコンテンツが読みやすくなると言ったメリットがあります。そんなダークモードをWikipediaに適用す...

List

  • 2018/12/28

Debucsser - CSS情報を可視化してデバッグをサポート

CSSは非常にデバッグしづらい技術です。多少間違っていても動きますし、余分にあっても気づきづらいものです。Webサイトを更新するのに伴って、不要なCSSが蓄積されていたなんて話もよく聞きます。そんなCSSのデバッグに使ってみたいツールがDebucsserです。クラスやIDを可視化してくれます。## Debucsserの...

List

  • 2018/12/23

Dark Reader - どんなサイトでもダークモードに

macOS Mojaviやスマートフォンで取り入れ始めているダークモード。目の疲れを軽減したり、ハイライトを高めることで可読性を高める、電力消費量を抑える効果があります。次のSafariではダークモードが実装され、Webサイトでもダークモードが取り入れられるようになります。今回紹介するDark Readerはそんなダー...

List

  • 2018/12/22

Vuetify Theme Generator - Vuetifyのカラーリングをビジュアルで設定

Vue向けに開発されているUIフレームワーク、Vuetifyは人気があります。UIコンポーネントも多く、サポートされているWebブラウザも幅広くなっています。しかしVuetifyを自在にカスタマイズできるデザイナーの方はまだ多くなく、Vuetify標準のUIに寄ってしまいがちです。そこでせめて色だけでもカスタマイズしま...

List

  • 2018/12/21

minstyle.io - ミニマムながら十分なCSSフレームワーク

Webデザインを行う際に、スクラッチではなく何らかのフレームワークをベースにするケースが増えています。そんな時、あまり多機能なものを使うとデザイン全体が引きずられてしまったり、ちょっとしたカスタマイズがうまくいかなかったりします。そこで使ってみたいのがあまり多機能ではなく、ちょっと気の利いたシンプルなCSSフレームワー...