デザインの記事一覧
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だけで作られたマテリアルコンポーネントで...
bruck - コーディングベースのプロトタイプシステム
Webサイトのプロトタイプを作成する際には、こだわり過ぎないくらいのデザインに留めておくのが大事です。文字の大きさや画像の内容など、本来関係ない部分までデザインしてしまうと余計な議論に繋がりかねません。そこで使ってみたいのがbruckです。HTMLタグベースでプロトタイプをさくさくと作れます。## bruckの使い方左...
React Kawaii - React用の可愛いコンポーネント
Webコンポーネントの考え方を取り入れることで、Webサイトのデザインを再利用しやすくなります。実用的なコンポーネントもすでに出てきていたり、複雑な機能を可能にするコンポーネントを導入することでWebサイトを作りやすくなります。そんな中、今回はちょっと変わり種のコンポーネントReact Kawaiiを紹介します。Rea...
Slack Theme CLI - コマンドでSlackアプリのテーマを変更
Slackをデスクトップで使う場合、多くの人がSlackアプリを使っているのではないでしょうか。Webブラウザとは別プロセスで実行できるのが便利ですが、長時間利用する上で、白い画面では目が疲れてしまいます。そこで使ってみて欲しいのがSlack Theme CLIです。Slackのテーマを変更できるCLIコマンドです。#...
ColorPicker - 十分な機能を備えた小型カラーピッカー
画像編集をする際、HTMLを編集する際などカラーピッカーが欲しくなることがよくあります。そのために画像編集ソフトウェアを立ち上げたり、別なソフトウェアを立ち上げてカラーピッカーを選択するのは面倒です。多くのソフトウェア付随のカラーピッカーはそのソフトウェア外の抽出に対応していなかったりします。そこで使ってみたいのがCo...
Wikipedia Dark - Wikipediaをよく使う人こそぜひ！
ダークモードに注目が集まっています。元々エンジニアはエディタのテーマなどを暗く設定することが多かったですが、それが通常のアプリはもちろん、Webサイトにまで広がってきました。目の疲れを軽減したり、集中できる、暗い場所でもコンテンツが読みやすくなると言ったメリットがあります。そんなダークモードをWikipediaに適用す...
Debucsser - CSS情報を可視化してデバッグをサポート
CSSは非常にデバッグしづらい技術です。多少間違っていても動きますし、余分にあっても気づきづらいものです。Webサイトを更新するのに伴って、不要なCSSが蓄積されていたなんて話もよく聞きます。そんなCSSのデバッグに使ってみたいツールがDebucsserです。クラスやIDを可視化してくれます。## Debucsserの...