デザインの記事一覧
Windows 95 UI Kit - Windows 95風のWebサイトを作る際に
懐古主義という言葉があります。過去の出来事は美化される傾向にあり、当時味わったはずの嫌な思い出は忘却の彼方へ飛んでいってしまいます。その結果、古き良きなんて言葉が出てきます。今回紹介するWindows 95 UI Kitはその名の通り、Windows 95風のUIをWebブラウザ上に再現できるCSSデザインです。## ...
pagemap - Webページにミニマップを追加
長大なコンテンツがある時、自分が今どの位置にあるのか知りたくなります。書籍であればページ数が書かれており、Webサイトであればページネーションを分けたりします。自分の現在位置が分かることで、後どれくらいのコンテンツが残されているか把握できるようになります。そんなミニマップをWebサイトに追加してくれるのがpagemap...
Pakyow - デザインファーストなフレームワーク
Webフレームワークというとプログラマ向けのものが殆どです。プログラマにとって使いやすくともデザイナーにとって使いやすいとは限らず、なかなか普及しないケースもあります。そこで注目したいのがPakyowです。デザインファーストなWebフレームワークです。## Pakyowの使い方例えばこんな感じでコンテンツを作ります。と...
Darkmode.js - Webサイトにダークモードを手軽に導入
macOSでダークモードが導入されて以降、一気にその波が広がっています。アプリなどもダークモードをサポートしたり、Webサイトでも行われるようになっています。プログラマやエンジニアでは背景を黒くするのが当たり前だったので、時代が追いついたと言えなくもなさそうです。そんなダークモードをWebサイトでも使えるようにするのが...
CSS Grid Generator - CSSグリッドを簡単に作成
CSS3ではグリッドが簡単に作れる機能が実装されていますが、テキストできちんとした設計を行うのは大変です。左右の関係を考えながら組むのですが、入れ子になっていたりするとすぐに破綻してしまいます。最初の設計をきちんと行わなければなりません。そこで使ってみたいのがCSS Grid Generatorです。Webブラウザ上で...
Windows Auto Night Mode - Windowsにナイトモードを導入
macOS Mojaviから導入されたダークモードに注目が集まっています。時間によってUIを変えることで時間を意識したり、画面の輝度を調整することで目に優しい環境が作れます。開発者であれば画面を見続ける時間が長いのでぜひ欲しい機能でしょう。Windowsでは自動的に変わってくれる機能はありませんが、Windows Au...
color-image-app - 色の持つイメージから新しいカラーリングを生成
色を決めるのは大変です。そのため、様々な補助ツールが存在します。写真からカラーパレットを抽出したり、有名なWebサービスと同じカラーリングを提示してくれるものなど様々です。それらを駆使してなお、良い色が決められないという人は多いでしょう。そこで使ってみて欲しいのがcolor-image-appです。色を表現から生成しま...
FullScreen Slider - アニメーションしながらコンテンツを切り替え
SPAなサイトではページ遷移がない分、コンテンツを切り替える時のアニメーションに気を配らないといけません。そうしないとコンテンツの変化が平凡になり、印象が薄れてしまいます。スムーズなスクロールはよくある手法です。今回紹介するFullScreen Sliderもそんなスクロール用ライブラリです。表示範囲全体をスライドさせ...
Uix Kit - 120を超えるコンポーネントが用意されたBootstrap互換のUIキット
Webデザインテンプレートを用いることで、素敵なWebサイトを簡単に構築できます。しかし、このテンプレート作成者の想定範囲内の使い方であれば問題ないのですが、ちょっとしたカスタマイズにも対応しておらず、一から探し直すなんてこともよくあります。そういった点においてBootstrapの汎用性は高く、利用者も多いのです。しか...
React95 - 懐かしのWindows 95のUIをReactで
Windows 95が発売してからすでに25年が経とうとしている事実。4半世紀前になるのです。その頃からMac派なのでWindows 95発売日の祭りはニュースで見た程度なのですが、PCの歴史が変わった瞬間でもありました。そんなWindows 95のUIを現在の技術、Reactで再現しようというのがReact95です。...
Ikonate - カスタマイズ重視のSVGアイコン集
SVGの良いところはXMLでベクターベースなのでJavaScriptからカスタマイズしやすいということです。色などはもちろん、表示する向きなども変えられます。拡大、縮小しても綺麗なのも嬉しいポイントです。そんなSVGアイコンとしてIkonateを紹介します。カスタマイズしやすいのが売りのSVGアイコン集です。## Ik...
Water.css - 読み込むだけでちょっと綺麗なデザインに
Webは自由度の高いプラットフォームです。WebブラウザはHTMLとCSSを使ってデザインするのが前提で、デザインしない時の表示は酷いものです。しかし、こったデザインをするのは時間がかかります。そこで使ってみたいのがWater.cssです。CSSファイルを読み込むだけで、ちょっと良い感じのデザインにしてくれます。## ...
natUIve - UIコンポーネントが多数揃ったCSSフレームワーク
WebのUIフレームワークとしてはBootstrap一強が続いています。しかしフレームワークとしての癖もあり、Webデザイナーとしては自分のやりたいデザインが実現しづらいかも知れません。そんな時には他のUIフレームワークに触れてみても良さそうです。今回はnatUIveを紹介します。デザインフレームワークとしてはもちろん...
Aafu - 開発者ならポートフォリオを作ろう
転職などの際に個人のポートフォリオがあるかどうかは大きな意味を持ちます。少なくとも私が面接する立場であればGitHubアカウントとそのリポジトリを見るでしょう。対外的にアピールしていない開発者は雇用されづらくなるはずです。そこで自分が何者であるかアピールできるポートフォリオサイトを立ち上げましょう。Aafuはシンプルな...
Pixel Picker - 小さなカラーピッカー
Webページのデザインやプレゼンテーションを作っている際など、画面上にある色をピックアップしたいと思うことがあります。そのために画像編集ソフトウェアを立ち上げたりするのは面倒です。そこで使ってみたいのがPixel Pickerです。独立したアプリケーションとして提供されるカラーピッカーです。## Pixel Picke...
Tech companies Logos In CSS
CSS3によって計算ができるようになったり、表現力が大幅に高まっています。CSS3を駆使することによって、イラストを描いたり、アニメーションも実現できます。もちろん、かなりの創意工夫は必要ですが単なる絵よりもインパクトがあります。今回紹介するTech companies Logos In CSSはCSSだけを使ってテッ...
RTS - レスポンシブにテキストサイズを変える
レスポンシブWebデザインは標準的に用いられるようになっていますが、多くは幅や表示する項目の並べ替えに特化しています。Web上に最も多いコンテンツはテキストである以上、もっとテキストに気を配るべきではないでしょうか。そこで使ってみたいのがRTSです。レスポンシブにテキストサイズを変更してくれます。## RTSの使い方B...
CSSans Pro - CSS製のフォント
最近はWebFontが流行っており、Web上で格好良いテキスト表現ができるようになっています。しかしWebFontの弱点としては、基本的に単色のみということです（合字で可能にする方法もあるようですが）。それでは表現力が片手落ちでしょう。そこで参考にしたいのがCSSans Proです。CSSで作られたフォントになります。...
mockup - Red製のモックアップデザインツール
Redというプログラミング言語があります。REBOLという言語にインスパイアされており、プロトタイプベースでマクロシステムを持っています。詳しくはRed Programming Language: About
Matter - ピュアなCSSで作られたマテリアルデザインコンポーネント
マテリアルデザインは単なるデザインにとどまらず、アニメーションも大事な要素になります。ユーザがタッチした、スワイプしたといったアクションに対して適切なフィードバックがあってこそです。そのため、デザインの敷居が高くなっています。そこで使ってみたいのがMatterです。ピュアなCSSだけで作られたマテリアルコンポーネントで...