人工知能もついにここまで！ロゴのデザイン、Webサイトのスタイルガイドを作成できるオンラインサービス -Brandmark今年になって人工知能、AIが取り入れられたWeb制作関連のサービスがどんどんリリースされています。フォントの組み合わせをAIで、カラーの組み合わせをAIで、サイトのリデザインをAIで、自動化することができ、自分にはない知識を引き出して効率的に作業することができます。 今回紹介するのはサイトのブランド、ロゴやスタイルガイドを数クリックするだけで作成できてしまうオンラインサービスです。そのまま使ってもよし、カスタマイズも可能なので、ベースとしても利用できます。
個人のデザイナーさんがフォントやグラフィック素材を販売した売上額が大台突破で、すごすぎる！
当ブログでたびたび紹介するCreative Marketで、個人のデザイナーさんがなんと1億円（$1,000,000）の売上を達成したそうです！ Creative Marketは名の通り、クリエイティブを扱ったマーケットで、個人でフォント・グラフィック素材・写真・テンプレートなどを販売できるサイトです。 Nicky Laatz 彼女の販売歴を見ると、最初が2012年12月で、計61種類のフォントやグラフィック素材を扱っています。ほとんどのものは$10-20なので、彼女の人気の高さがうかがえます。 実は僕も、彼女のフォントをいくつか購入しています。 フォントとしての美しさ、クオリティの高さ、そしてお値段がお手頃と、3拍子揃った素晴らしいフォントです。彼女の人気アイテムをいくつか紹介します。 Hello Beautiful Font Duo + Swashes まずは一番のお気に入り。手書きス
[JS]これは便利！YouTubeの動画をはじめ、VineやTEDやCodePenやツイートやPDFやGoogleマップまで簡単にページに埋め込めるスクリプト -Embed.js
デモ：Googleマップ Googleマップもサポート。 Embed.jsの使い方 Step 1: 外部ファイル 当スクリプト・スタイルシートとjquery.jsを外部ファイルとして記述します。 <head> ... <link rel="stylesheet" href="path/to/jquery.embed.css"/> <script src="path/to/jquery.min.js"></script> <script src="path/to/jquery.embed.js"></script> </head> Twitterを埋め込む時には「widgets.js」、コードのシンタックスハイライトには「highlight.min.js」を使用します。 <head> ... <link rel="stylesheet" href="path/to/jquery.embed.
![[JS]これは便利！YouTubeの動画をはじめ、VineやTEDやCodePenやツイートやPDFやGoogleマップまで簡単にページに埋め込めるスクリプト -Embed.js](https://cdn-ak-scissors.b.st-hatena.com/image/square/c7f1b78c4054290453044ec517a54e1f30348b63/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201501%2F2015041500.png)
最近のWebページで使用されている『さまざまな魅せ方』を実装するCSSやJavaScriptの最新チュートリアルのまとめ
最近のWebサイトやブログで見かけるアニメーションを使ったさまざまなかっこいいエフェクトやコンテンツの見せ方を実装するCSSやJavaScriptのチュートリアルをCodyHouseから紹介します。 それぞれファイルを一式でダウンロードできるので、すぐに利用できます。 Fixed Background Effect デモページ 対応ブラウザ：Chrome, Safari, Firefox, Opera, IE9+ sectionやdivを垂直に配置した縦長ページで、背景を固定し、各コンテンツがカーテンを引き上げるようにスクロールするシンプルなテンプレート。
マンガや同人誌に無料で使える、吹き出しの素材300種類
マンガや同人誌に無料で使えるかわいい吹き出し素材をご紹介。 いつもは読むばっかりですが、いろいろなデザインがあるんですね。
2015年これからのWeb制作業界の流れ、伸ばしておきたいスキル、Webデザインのトレンドなどのまとめ
数多くのブログで2015年のトレンドをさまざまな切り口でポストしているので、その中から特に印象的で共感がもてたものをまとめて紹介します。 注目すべきキーワードは、Material Designの本格始動、マイクロデザイン、スクロールコンテンツ、スマフォ・タブレットユーザーの更なる増加、そしてHTML/CSSのフレームワークの陰り。 写真：re:splashed 2015年、現在のWebデザインを確認しながらこれからのトレンドを探る 2015年、Web制作業界全体の流れ 2015年にあなたが目にするWebデザインのトレンド 2015年に大きく変化するウェブデザインの10の傾向 2014年のトレンドで良かったもの、ダメだったもの モバイルデザインに向けたWebデザインの7つの戦略 2015年、IT系で求められているスキル 2015年、現在のWebデザインを確認しながらこれからのトレンドを探る
[JS]ヘッダをスクロールしても上部に固定表示するだけでなく、途中で変更もできるスクリプト -Clingify
ヘッダをスクロールしても上部にぺたっと貼りつくように表示し、ブレイクポイントを設定するとその地点で貼りつける要素を変更するjQueryのプラグインを紹介します。 デモページ：Optionsからちょい下にスクロール かなり下の方までスクロールすると、二番目のアイテムが上部に貼りつきます。 Clingifyの使い方 Step 1: 外部ファイル </body>の上あたりに、jquery.jsと当スクリプトを外部ファイルとして記述します。 <body> ... <script type="text/javascript" src="/js/jquery.js"></script> <script type="text/javascript" src="/js/jquery.clingify.js"></script> </body> Step 2: HTML スクロールしても上部に固定配置にする
[JS]最近のWebサイトで見かける面白い仕掛けや便利な機能を実装するスクリプトのまとめ
最近のWebサイトでよく見かける面白い仕掛けのコンテンツやエフェクト、便利な機能を実装できるjQueryのプラグインやスクリプトを紹介します。 Midnight デモページ ロゴやヘッダなどをスクロール時に固定表示し、スクロールして表示されたコンテンツに応じて、固定エレメントのスタイルシートを変更させて表示するjQueryのプラグイン。 デモでは、表示されているコンテンツに応じて、ロゴの背景色とカラーが変わります。 Off Canvas Menu Effects デモページ メニューをサイドやトップ・ボトムから気持ちいいアニメーションで表示させるOff Canvas Menuのかっこいいエフェクトのまとめ。アニメーションのバリエーションとして見るだけでも楽しいです。
![[JS]最近のWebサイトで見かける面白い仕掛けや便利な機能を実装するスクリプトのまとめ](https://cdn-ak-scissors.b.st-hatena.com/image/square/eb35406166a9bab01fb02a6a7949249bd7191347/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201404%2F2014092904-01.png)
[JS]実装は簡単でスマフォにも対応、縦長ページをスクロールする時にちょうどいい位置にスナップさせるスクリプト -Scrollify
section要素やdiv要素でパネルを垂直に配置した縦長ページをスクロールする時に、各パネルをちょうどいい位置にスナップさせるjQueryのプラグインを紹介します。 デスクトップのホイール操作、スマフォやタブレットなどのタッチ操作にも対応しています。 ちょうどいい位置に自動でスクロール スクロールはイージングやバウンドなど、さまざまなエフェクトが利用できます。 Scrollifyの使い方 Step 1: 外部ファイル 当スクリプトとjquery.jsとeasing.jsを</body>の上あたりに記述します。 jQueryは1.6+で、どれでも可です。 <body> ... <script src="script/jquery-1.6.js"></script> <!--<script src="script/jquery-2.1.1.js"></script>--> <!--<scri
2014年これからのウェブ制作業界の流れ、伸びる職種、ウェブデザインのトレンドなどのまとめ
数多くのブログで2014年のトレンドをさまざまな切り口でポストしているので、その中から特に印象的で共感がもてたものをまとめて紹介します。 キーワードとしては、スマフォ・タブレットなどの小さいサイズのタッチデバイス、レスポンシブ（特に画像）、HTML5/CSS3、ビッグデータ、リスク管理が注目されています。 2014年、ウェブ制作業界全体の流れ ウェブデザインの2014年のトレンド 2014年に大きく変化するウェブデザインの7つの傾向 2014年、注目度の高いIT系の職種・役割 2014年、ウェブ制作業界全体の流れ まずは、2012, 2013年と的確な予測をだしてきたsitepointの2014年のウェブ制作業界の全体の流れから。 10 Web Predictions for 2014 スマートフォン中心の年 最終的にはデスクトップからのアクセスをスマフォが超える HTML5のウェブアプリ
[JS]実装も簡単、必須入力の有無やメールアドレスのチェックなどフォームのバリデーションをおこなう軽量スクリプト -Validetta
選択しているのが2つかどうか Validettaは、以下の項目がチェックできます。 データが空かどうか。 電子メールのチェック。 数字のチェック。 クレジットカード番号のチェック。 フィールド内の文字数のチェック。 チェックボックスやセレクトボックスの選択数のチェック。 2つのフィールドが同じかどうか。 正規表現を使ったフィールドのチェック。 Validettaの使い方 Step 1: 外部ファイル jquery.jsと当スクリプト・スタイルシートを外部ファイルとして記述します。 <link href="validetta/validetta.css" rel="stylesheet" type="text/css" media="screen" > <script type="text/javascript" src="http://code.jquery.com/jquery-late
フラットの後にじわじわきてるデザインのトレンド -long shadow design
フラットが最初にきた時ほど大きな波ではないと思いますが、単調なフラットなデザインのアクセントにつかえそうなじわじわきてる新しいデザイントレンド「long shadow design」を紹介します。 long shadow design 「long shadow design」は文字通り「長いシャドウを使ったデザイン」で、フラットなスタイルに奥行きを与えることができます。 dribbbleなどのアイコン作品でも最近よく見かけますね。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSSがこんなに進化してるとは！18才の少年がつくった3Dアニメーションのライブラリがすごすぎる -voxel.css
初心者でもBootstrapを賢く使いこなす！基礎からカスタマイズ、無い機能の追加まで -これからのWebサイト設計の新しい教科書
CSSの素晴らしいアイデアが満載！2014年スタイルシートのテクニックのまとめ
ガーリーなかわいいフォントからシンプルなものまで、高品質な新作フリーフォントのまとめ -2014年10月
ブックマークしておきたい、スマホUIをコレクションしている海外と日本のサイトのまとめ
ダウンロードしておくべし！iOS 8のGUI要素をまとめたPSD素材の決定版 -iOS 8 GUI PSD(iPhone 6)
商用利用無料！どこか懐かしく控えめな日本語のフリーフォント -ほのかフォント
ウェブでも同人誌でも動画でも商用利用可！女子向けのしとやかでカワイイ日本語のフリーフォント -ロゴたいぷゴシック-コンデンスド | コリス