男性の顔をカスタムできるイラストジェネレーター「Gentleman Character Generator」
TOP > Design > 男性の顔をカスタムできるイラストジェネレーター「Gentleman Character Generator」 自身のプロフィールやポートフォリオを作成する際に、顔写真を使用することがあると思いますが、中にはちょっと抵抗がある方もいらっしゃるはず。今回はそんな時に活躍してくれそうなカスタムできるイラストジェネレーター「Gentleman Character Generator」を紹介いたします。 さまざまなパーツを組み合わせて、オリジナルの男性の似顔絵を作り上げることができます。 詳しくは以下 用意されているのは、ベースとなる首から上の顔、目、髪型、髭、口元などの顔パーツ。衣服や帽子、メガネなどの服飾パーツ。また、それぞれのパーツは色選択も可能なので、組み合わせのバリエーションはかなりの量になります。日本人の顔といった印象ではないですが、ちょっと編集すれ
種類豊富な医療系に特化したアイコンセットのまとめ「20 Free Medicine Icon Sets You Can Use」
TOP > Design , WebDesign > 種類豊富な医療系に特化したアイコンセットのまとめ「20 Free Medicine Icon Sets You Can Use」 医療系分野は専門用語も多く、ユーザーにわかりやすくサイトやパンフレットを使用してもらうためには、視覚的に説明できるアイコンが効果的です。そんなシーンで役に立つ医療系アイコンのまとめ「20 Free Medicine Icon Sets You Can Use」を今回はご紹介していきたいと思います。 Health Icons by UI8 – Dribbble 洗練されたストロークアイコンからカラフルなアイコンまで幅広く収録されています。下記にいくつかピックアップ致しましたので、ご覧ください。 詳しくは以下 Iconset:dental-premium-color-symbol icons – Down
デベロッパーであれば知識として取り入れておきたいCSSで作るVR「CSSVR: Progressive VR experiences」
TOP > javascript > デベロッパーであれば知識として取り入れておきたいCSSで作るVR「CSSVR: Progressive VR experiences」 他の世界に入り込むような没頭感を味わうことができるVR。気軽にデモを作成ができたらと、デベロッパーであれば1度は感じたことがあるかもしれません。そんな中今回紹介するのは、CSSで作るVR「CSSVR: Progressive VR experiences」です。 VRの複雑な動きをどう再現していくのか、その再現率の高さはどうれくらいなのか。デベロッパーであれば気になるところ。下記にデモを載せているのでご覧ください。 詳しくは以下 VRならではの立体感をきちんと再現し、ドラッグで中を見渡すことが可能。奥行きのある建物内で“open ドア”と書かれたボタンをクリックすると壁が開き、宇宙空間が広がります。クローズボタ
直感的な操作で簡単にアニメーションを作成することができるCSSアニメーションツール「Stylie – A Free CSS Web Animation Builder」
直感的な操作で簡単にアニメーションを作成することができるCSSアニメーションツール「Stylie – A Free CSS Web Animation Builder」 WEBサイトならではのアクション要素の一つ、アニメーション。取り入れることができれば個性的でインパクトのあるサイトを制作できますが、アニメーションの作成はハードルが高いと感じる方も多いのではないでしょうか。そんな方におすすめできるCSSアニメーションツール「Stylie – A Free CSS Web Animation Builder」を今回はご紹介します。 使い方が難しそうと思われる方も多いかもしれませんが、汎用性の高い便利なツールとなっています。使用方法をわかりやすく説明してくれている動画が紹介されていますので、まずは下記よりご覧ください。 詳しくは以下 使い方は直感的で、ドラッグで図形や黄緑色の＋印を動かすことで
便利で優秀なSVGツールとアイコンセットのまとめ「40 Excellent SVG Tools and Dozens of Icon Sets」
TOP > Tool > 便利で優秀なSVGツールとアイコンセットのまとめ「40 Excellent SVG Tools and Dozens of Icon Sets」 レスポンシブが盛んな昨今。PCとスマートフォン両方で使用することができ、かつ綺麗に表示させることが可能なSVGファイルは、非常に便利。今回ご紹介する「40 Excellent SVG Tools and Dozens of Icon Sets」ではSVGに焦点をあてた便利なツールがまとめられています。 Plain Pattern SVGファイルを編集してアニメーションを制作できるツールなどこれから必要になるコンテンツが多数収録されており、その中から気になったものをいくつかピックアップしていますので下記よりご覧下さい。 詳しくは以下 Snap.svg – Home SVGファイルを自由に編集することができ、簡単な操
期待感を煽る！webサイトオープン前のカウントダウン用のフリーテンプレート集「Top 15+ Free Website Under Construction, Coming Soon Templates」
期待感を煽る！webサイトオープン前のカウントダウン用のフリーテンプレート集「Top 15+ Free Website Under Construction, Coming Soon Templates」 情報解禁やコンテンツ公開前のWebサイトでよく利用されるのが、リリース日までの日付をカウントダウンする表現。カウントダウンと共に時間が刻々と過ぎていく様子は、ユーザーの期待感を煽るのにぴったりです。今回ご紹介するのは、そんなカウントダウンページを作るためのフリーのデザインテンプレート集「Top 15+ Free Website Under Construction, Coming Soon Templates」です。 Black HTML5 Coming-soon Web Template – WebThemez どれも秒単位で公開日をカウントできる、様々なテイストのテンプレートが15点
こんにちは！貴方の名前は？など、チャットのように会話できるUI「BotUI」
LINEなどでお馴染みのチャットのユーザーインターフェイス。メールに代わるコミュニケーションツールとして台頭し、多くのサービスで取り入れられているチャット。今回ご紹介するのは、そんなチャットのユーザーインターフェイスを実現できる「BotUI」です。 動作のイメージや動きなどについては、BotUI – A JavaScript framework to build conversational UIs. からご覧いただくことが可能です。 詳しくは以下 これらを利用すれば、チャットコミュニケーンを行いながら、画像や動画、リンクを見せていくことが可能です。使用場面や用途は限られてきそうですが、こういったサービスや仕掛けを作りたいというときには非常に有益なパッケージです。 コードについては「GitHub – moinism/botui: A JavaScript framework to crea
Webデザインをよりクリエイティブにみせてくれる 複数写真の同時切り替えが可能なグリットスライドショー「CSS Grid Layout Slideshow」
TOP > WebDesign > Webデザインをよりクリエイティブにみせてくれる 複数写真の同時切り替えが可能なグリットスライドショー「CSS Grid Layout Slideshow」 Web上で写真を見せる定番の手法のひとつ、スライドショー。コンテンツを見せるのに利用したり、メインビジュアルに利用したり…とても活用幅が広く便利な存在です。今回ご紹介するのはそんなスライダーを、よりクリエイティブに見せてくれる変則的なスライドショー「CSS Grid Layout Slideshow」です。 グリット上に並べられた複数のイメージを、一気に切り替えることができる美しいスライドショーのフリーCSSソースです。 詳しくは以下 ランダムで大胆な配置に並べられたスライド画像は矢印を押すことで、次の画像へと切り替えることが出来ます。グリットの並び方はスライドごとに異なり、アニメーションと
プログラマーのためのWEBサービスや開発系のアイコンセット「devicon」
Twitterなどの有名なアイコンは、自分がよく使用するものはストックとして持っているかもしれませんが、必要時にない場合は探すことになり、非常に手間を感じるのではないでしょうか。そんな手間を省いてくれる「devicon」を今回はご紹介します。 デベロッパーが持っておくと便利なアイコンが多数まとめられており、ソースコードも記載してくれている優秀なアイコンセットになります。 詳しくは以下 このアイコンセットの最大の特徴は、SVGバージョンのアイコンのソースも一緒に出てくること。自分に必要なアイコンをクリックすると左側にソースが2つ出現。そのうちの一つがSVGバージョンのもので、そのまま貼付けるだけで、アイコンを表示適応することができます。著名なよく利用するであろうアイコンの種類が豊富なことも嬉しいポイント。 サイズの拡大・縮小を行っても画像の崩れがでないとされるSVGはこれからも重宝される存在
クリエイティブな企画書作成のためのKeynoteテンプレート「Startup Powerful Keynote Template」
TOP > Design , Tool > クリエイティブな企画書作成のためのKeynoteテンプレート「Startup Powerful Keynote Template」 デザインの提案に限らず、企画書を作成する機会は多いと思います。できれば企画書自体にも、クリエイティブ性を持たせておくと評価も高まるもの。そんな時に活用したい、クリエイティブな企画書作成のためのKeynoteテンプレート「Startup Powerful Keynote Template」を今回は紹介したいと思います。 Keynoteをベースとした32以上のテンプレートが集約されていますので、それぞれの場面で使い分けることもできそうです。 詳しくは以下 ベースとなるシンプルなテンプレートベースに、表紙、表組みやマップ、グラフやフロー、またタブレットやデスクトップパソコンの画面など、よく使用するであろうツールが用
CSSとjavascriptで創る軽量な3D表現ライブラリ「voxel.css」
近年、ブラウザの発展やWEBGLなどの技術的な発展によりWEB上でも3Dを用いたクリエイティブな表現が多く取り入れられています。今日紹介するのはCSSとjavascriptで創る軽量な3D表現ライブラリ「voxel.css」です。 空間上にオブジェクトを配置したり、定めた領域・面にテクスチャを貼ってオブジェクトを生成したりといった事が簡単に実現可能となっています。 詳しくは以下 上記は立方体に、テキスチャを張り込んだもの。GPUで描画され、立体的に回転させることも可能、PNG・GIFアニメ・SVGといった様々なフォーマットをテキスチャとして利用可能です。その他にも、様公式サイトに公開されている「voxel.css • Demo」からは触りながら機能を確かめることができます。 ソースコードはGithubにて公開されており、ライセンスはMIT Licenseとなっております。サイト制作のアクセ
CSSとテキストで実現するシンプルなローディングアニメーション「text-spinners」
WEBの演出の一つで、UXのストレスを軽減してくれるローディングアニメーション。WEBサイトがだんだんリッチになる中、当たり前の存在になってきていますが、今回紹介するのはCSSとテキストで実現するシンプルなローディングアニメーション「text-spinners」です。 通常ローディングアニメーションはいくつかの画像を利用して生成されますが、このアニメーションはCSSとテキストのみで制作されるため非常に軽量です。 詳しくは以下 実装方法はとてもシンプルで、CSSを読み込んで、あとはアニメーションを読み込む場所にclassを指定すれば実装できます。用意されているアニメーションは様々で、ドットアニメーションからバーアニメーションなどといった一般的なものから、ちょっと変わった絵文字を利用したものなども用意されています。 テキストを利用するため、CSSで指定するフォントで印象が多少変わるため、ある程
CSSのみで制作されたローディングアニメーションセット「CSS Loader」
CSSのみで制作されるアニメーションは軽量でシンプルで非常に使い勝手も良く、国内でもブラウザの制限が商業レベルでも外れてきた今、数多く活用されはじめてきていますが、今日紹介するのはCSSのみで制作されたローディングアニメーションセット「CSS Loader」です。 ローディングアニメーションはWEB制作の現場でも比較的利用頻度が高く、最近の画像中心のWEBサイトでは必ずと言っていいほど実装するためCSSのみで利用できるのは非常に魅力的です。 詳しくは以下 大きくサンプル用意されているのは全部で6つで、サークルがくるくる回る、Default、ローディングバーがループアニメーションするBar、画面全体を利用して動きを見せるBorder、サークルを２つ重ねたDouble、ボールが弾むようにアニメーションするBall、スマートフォンの筐体が揺れるSmartphoneとなります。 セットアップは非常
CSSのみで実現する1KB未満の超軽量ツールチップ「Wenk」
WEBサイトなどの補足事項などを表示するのに便利なツールチップ。一般的にはアニメーション表現が伴うため多くはjavascriptを利用して制作されていますが、今回紹介するのはCSSのみで実現する1KB未満の超軽量ツールチップ「Wenk」です。 非常にシンプルなツールチップで、上下左右位置を表示したり、幅の調整したり細かな調整がデキるようになっています。 詳しくは以下 利用方法は非常に単純で、上記の様に要素にdata-xxxxといった形式で内容と位置を指定することで実装可能になっています。CSSだけなので、特にjsなどを読み込む必要なくシンプルに実装できるため、幅広いユーザーが利用しやすいライブラリになっていると思います。 ソースコードはGitHubに公開されておりサンプルと共にダウンロード可能です。ライセンスはMIT License (MIT)となっており、ライセンスに従って、自由に利用す
物を売るために参考になるWEBデザイン集
ECサイトからプロダクトランディングページまで物を売るためには様々なページが必要ですが、その中から決済画面、プライスページ、プロダクトページ、ストアページと大きくカテゴライズしてデザインを収集している、物を売るために参考になるWEBデザイン集を今回紹介したいと思います。 それぞれのカテゴリに特化して、デザインが集められており、スクリーンショットもフッターまでで取得しているため、サイト上でも全てを参照することが可能です。 詳しくは以下 カテゴリー内で上記のように大きくサイトを次々と見ていくことも可能ですが、カードタイプのレイアウトにして一覧でデザインを見ていく事も可能です。 Checkout Pages 海外のデザインが中心となりますが、かなりの数のデザインが集められています。珍しいカテゴライズですが、ECサイトやサービスサイトを作りたいという方は見たい部分が集約されているのでかなり重宝する
グラフィック・映像・音楽まで。商用利用可のフリー素材集約サイト「Stocky」
世界には多くのフリー素材を配布するサイトや紹介するサイトがございますが、その中でも珍しい、映像や音楽素材までをカバーした、商用利用可のフリー素材集約サイト「Stocky」です。 一般的なモックアップ素材から、ニットを編む、スマートフォンを触る男性といった映像素材まで様々な素材が配布されています。 詳しくは以下 配布されている動画素材の一つ「Hand knitting」 サイトにアクセスすると「Download absolutely free photo, video, graphics and music for commercial and personal use!」と明記されており、全ての素材が、個人・商用かかわらず利用することができるようです。カテゴリーはグラフィック、ミュージック、フォト、ビデオ、ブログとなっており、それぞれ絞り込んで素材探す事が可能です。 まだまだ数は多いとは言
ワイヤーフレームづくりに便利なキット40「40 Free Wireframe Templates for Mobile App, Web and UX Design」
ワイヤーフレームづくりに便利なキット40「40 Free Wireframe Templates for Mobile App, Web and UX Design」 本制作をする前にワイヤーフレームで制作して、UIやUXなどをクライアントと確認するというのはWEB業界では慣習的になっていますが、今回紹介するのは、そんなワイヤーフレームづくりに便利なキットを集めたエントリー「40 Free Wireframe Templates for Mobile App, Web and UX Design」です。 Carbon Material Design eCommerce Wireframe Kit (PSD & Sketch) WEBからiOS、AppleWatchまで様々なタイプのワイヤーフレームが紹介されています。今日はその中から特に気になったワイヤーフレームをピックアップして紹介したい
CSS3 Flexbox UIパターン集「Flexbox Patterns」
CSS3で利用できるようになったFlexbox。WEBアプリやレスポンシブを想定して開発されたものですが、まだまだ現場ではそれほど普及していないのが現状です。今日紹介するのはそんなFlexboxを理解・利用するための様々なUIを簡単に利用できるCSSのFlexbox UIパターン集「Flexbox Patterns」です。 「Flexbox Patterns」は利用しやすくなるようにそれぞれのユーザーインターフェイス毎に、簡単な解説と、CSSとHTMLがセットでコピーできるようになっており、コピー＆ペーストで利用できるようになっています。 詳しくは以下 上記のようにCSSとHTMLがコピーできる形でまとめられているため、技術者でなくてもパーツだけなら簡単に組み込むことが可能です。 現在は実用的なものから、なかなかニッチなものまで全部で10のユーザーインターフェイスが登録されています。シンプ
WEBデザイナーのための12の軽量なCSSフレームワーク「12 Small CSS Frameworks」
TOP > WebDesign > WEBデザイナーのための12の軽量なCSSフレームワーク「12 Small CSS Frameworks」 EBサイトを構築するにあたって欠かせないCSS。様々な表現が可能なものですが一から組んでいくとそれなりに時間が掛かるものです。そこで便利なのが、よく使う要素や表現を簡単に利用することができるCSSフレームワーク。今日紹介するのはWEBデザイナーのために12の軽量なCSSフレームワーク「12 Small CSS Frameworks」です。 min すべて5KB以内に収まるという非常に軽量なCSSフレームワークのみまとめられていましたので、その中からいくつかピックアップして紹介したいと思います。 詳しくは以下 Milligram Chrome, Firefox, IE, Safari, Operaに対応した軽量のCSSフレームワーク Blaz
psdでもAiでもPNGでも！WEBデザイナーのための1000のフリーミニアイコン集「Free Mini Icons Pack」
TOP > Design , vector , WebDesign > psdでもAiでもPNGでも！WEBデザイナーのための1000のフリーミニアイコン集「Free Mini Icons Pack」 WEBデザインを行なう上で、非常重要なアイコン。全て一から制作という方も中にはいらっしゃると思いますが、フリーで使い勝手が良いアイコン集を探しているWEBデザイナーの方は多いのではないでしょうか？そんなWEBデザイナーの為に重宝しそうなのが、今回紹介するpsdでもAiでもPNGでも！WEBデザイナーのための1000のフリーミニアイコン集「Free Mini Icons Pack」です。 1000種類ものアイコンが収録され、対応している形式はなんと、PSD / AI / EPS / PNG / SVG となっており、制作に必要なフォーマットで全てが揃っての配布となっています。 詳しくは
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
