サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
Pixel 9
web-cre.info
「55 CSS Checkboxes」ではフォーム要素であるCheckboxのデザイン事例が掲載されています。 非常に多くのサンプルがあるのですぐに活用できそうです。 55 CSS Checkboxes 後藤賢司 東京と大分を拠点として全国的に活動しています。出版社、デザイン会社、Web制作会社、企画・マーケティング会社での経験を生かし、媒体にとらわれない提案・企画・設計が得意です。自社メディア運営によるノウハウを持ち、様々な視点を活用した提案をしております。よつばデザイン(後藤賢司)は、中小企業庁「中小企業・小規模事業者ワンストップ総合支援事業(ミラサポ)」の派遣専門家として認定を受けたり、大分商工会議所が主催する「大分商工会議所ビジネスなんでも応援隊」のサポートメンバーとして、中小企業様の経営課題や広告・看板・宣伝ツール・Webサイトなどのプロモーション相談を受けております。 その他、
「Get quickly inspiration!」という文字通り、何かしらアイデア出したい時に参考になるサイトです。 パーツ毎に分類されているので、見やすくなってます。 意識してるのだと思いますが方向性の幅が広いのも良いですね。 Calltoidea 後藤賢司 東京と大分を拠点として全国的に活動しています。出版社、デザイン会社、Web制作会社、企画・マーケティング会社での経験を生かし、媒体にとらわれない提案・企画・設計が得意です。自社メディア運営によるノウハウを持ち、様々な視点を活用した提案をしております。よつばデザイン(後藤賢司)は、中小企業庁「中小企業・小規模事業者ワンストップ総合支援事業(ミラサポ)」の派遣専門家として認定を受けたり、大分商工会議所が主催する「大分商工会議所ビジネスなんでも応援隊」のサポートメンバーとして、中小企業様の経営課題や広告・看板・宣伝ツール・Webサイトな
レスポンシブなSNSボタンのコードを生成できる「Reponsible Social Sharing Buttons」 アイコン部分はSVG形式になっています。これを元にアレンジしても良さそうですね。 Reponsible Social Sharing Buttons 後藤賢司 東京と大分を拠点として全国的に活動しています。出版社、デザイン会社、Web制作会社、企画・マーケティング会社での経験を生かし、媒体にとらわれない提案・企画・設計が得意です。自社メディア運営によるノウハウを持ち、様々な視点を活用した提案をしております。よつばデザイン(後藤賢司)は、中小企業庁「中小企業・小規模事業者ワンストップ総合支援事業(ミラサポ)」の派遣専門家として認定を受けたり、大分商工会議所が主催する「大分商工会議所ビジネスなんでも応援隊」のサポートメンバーとして、中小企業様の経営課題や広告・看板・宣伝ツール・
動画を全面背景にしたサイトなどありますが、肝心の動画素材を調達するのはそれなりに骨が折れます。 Pexels Videos は動画素材を提供しているサイト。 cc0ライセンスなので商用利用もOKでクレジットも不要です。 音声はカットされてるようなのでそのまま使えるのもありがたいですね。 モックアップ用に使用するのも良いですし、本番用としても使えますね。 Free stock videos – Pexels Videos 画像を集めたpexelsというサイトもあります。 こちらはunsplashなどの画像が多めです。 Pexels · Free high quality stock photos 後藤賢司 東京と大分を拠点として全国的に活動しています。出版社、デザイン会社、Web制作会社、企画・マーケティング会社での経験を生かし、媒体にとらわれない提案・企画・設計が得意です。自社メディア運営
ハンバーガーメニューなどのアニメーションを生成できる「Transformicons」。 出来るものは下記の通り。 BUilderボタンより飛んで、生成したいものを選んでビルド。 すぐに使えるソースコードが生成されます。 Transformicons 後藤賢司 東京と大分を拠点として全国的に活動しています。出版社、デザイン会社、Web制作会社、企画・マーケティング会社での経験を生かし、媒体にとらわれない提案・企画・設計が得意です。自社メディア運営によるノウハウを持ち、様々な視点を活用した提案をしております。よつばデザイン(後藤賢司)は、中小企業庁「中小企業・小規模事業者ワンストップ総合支援事業(ミラサポ)」の派遣専門家として認定を受けたり、大分商工会議所が主催する「大分商工会議所ビジネスなんでも応援隊」のサポートメンバーとして、中小企業様の経営課題や広告・看板・宣伝ツール・Webサイトなどの
Google Map を遅延ロードして読み込ませるjQueryプラグイン。( Lazy-loading とか Lazy-load とか言うやつです) 遅延で読み込ませる事により表示速度の向上が見込まれます。 Google Map自体使う機会が多いので導入しても良さそうですね。 デモ画面は下記ボタンより。 Lazy-loading Google Maps demo Lazy-loading Google Maps — Osvaldas Valutis 後藤賢司 東京と大分を拠点として全国的に活動しています。出版社、デザイン会社、Web制作会社、企画・マーケティング会社での経験を生かし、媒体にとらわれない提案・企画・設計が得意です。自社メディア運営によるノウハウを持ち、様々な視点を活用した提案をしております。よつばデザイン(後藤賢司)は、中小企業庁「中小企業・小規模事業者ワンストップ総合支援事
モバイル端末からの操作にも対応、全画面にも出来たりキャプション入れたり共有出来たりと機能も豊富なPhotoSwipe。 操作感もとても良い感じなので活躍する場面は多そうですね。 ライセンスはMIT。 PhotoSwipe: JavaScript Image Gallery 後藤賢司 東京と大分を拠点として全国的に活動しています。出版社、デザイン会社、Web制作会社、企画・マーケティング会社での経験を生かし、媒体にとらわれない提案・企画・設計が得意です。自社メディア運営によるノウハウを持ち、様々な視点を活用した提案をしております。よつばデザイン(後藤賢司)は、中小企業庁「中小企業・小規模事業者ワンストップ総合支援事業(ミラサポ)」の派遣専門家として認定を受けたり、大分商工会議所が主催する「大分商工会議所ビジネスなんでも応援隊」のサポートメンバーとして、中小企業様の経営課題や広告・看板・宣伝ツ
GoogleがMaterial Designという「ビジュアル言語」を発表しました。 http://www.google.com/design/spec/material-design/introduction.html Material Designは、古き良いデザインと、新しいテクノロジーを融合させ「ユーザーに分かりやすい」デザインを提供するための概念です。 Material Designを開くと、アニメーションで「あーしろ、こーしろ」、「余白を大胆に空けろ」など様々なことが書いてありますが、どのように実装するかについてはあまり触れられていませんでした。 そして今回紹介するのがMaterial Designの概念のもと作られた「Materializeフレームワーク」です。 そしてこちらが紹介動画です。 今後このフレームワークのように、Webサイトを作るための素材はどんどん出てくることだ
下記の動画Gifでは見えませんがローディングアニメもあります。 やりすぎると鬱陶しいのでページ数少ないサイトや、閲覧頻度の低いサイト向きですね。 Animsition · A simple and easy jQuery plugin for CSS animated page transitions. 後藤賢司 東京と大分を拠点として全国的に活動しています。出版社、デザイン会社、Web制作会社、企画・マーケティング会社での経験を生かし、媒体にとらわれない提案・企画・設計が得意です。自社メディア運営によるノウハウを持ち、様々な視点を活用した提案をしております。よつばデザイン(後藤賢司)は、中小企業庁「中小企業・小規模事業者ワンストップ総合支援事業(ミラサポ)」の派遣専門家として認定を受けたり、大分商工会議所が主催する「大分商工会議所ビジネスなんでも応援隊」のサポートメンバーとして、中小企業
後藤賢司 東京と大分を拠点として全国的に活動しています。出版社、デザイン会社、Web制作会社、企画・マーケティング会社での経験を生かし、媒体にとらわれない提案・企画・設計が得意です。自社メディア運営によるノウハウを持ち、様々な視点を活用した提案をしております。よつばデザイン(後藤賢司)は、中小企業庁「中小企業・小規模事業者ワンストップ総合支援事業(ミラサポ)」の派遣専門家として認定を受けたり、大分商工会議所が主催する「大分商工会議所ビジネスなんでも応援隊」のサポートメンバーとして、中小企業様の経営課題や広告・看板・宣伝ツール・Webサイトなどのプロモーション相談を受けております。 その他、WordPressの勉強会を主催したり、Webやデザイン系のセミナーで登壇しています。すみだクリエイターズクラブ、CPIエバンジェリスト。和菓子(あんこ)好き。 よつばデザイン よつば手帖(ブログ) CO
Web上で予め用意されたテンプレート画像、文字を入力、エフェクトを設定していくだけで、html5、css、Javascriptでコードを書き出してくれる優れサイト。(※swfファイルも可能) なんとタイムラインで細かくも設定できます。プログラミングが苦手だけど動きを付けたい、ちょっとしたバナー制作にも重宝しそうです。 日本語テキスト入力には対応していません。 Create HTML5 Animation|Free Banner Maker
テンプレートを選んで、ドラッグ&ドロップでHTMLメールを作成出来る「BeeFree」がすごい。 使い方は直感でわかるレベルなので、スキルも不要。 スタートするとテンプレートが選べます。 リッチテンプレート。 ベーシックテンプレート テンプレートを選んで開くとこのような感じです。 右側のBlocksからパーツを追加する事も可能。ブロック(コンポーネント)単位で追加出来るのでそのまま使えます。 見たままで操作出来ます。わかりやすい。 追加出来るブロック デバイスに大きく左右されるHTMLメールに凝ったレイアウトは不要なのでこれだけあれば十分。 各ブロックのオプション。 背景色設定したり罫線設定したり余白設定したり。 一通り出来てセーブするとデータ一式をダウンロード出来ます。 ファイルの内容はこのような感じ。 画像部分をシネマグラフなんかで印象的なアニメGifを取り入れたりすればかなり良い感じ
フリーの画像サイトを検索できるところと言えばTheStocks.imでしたが、こちらのAllTheFreeStock.comは画像だけでなく、フリーの映像、アイコンを探す事が可能です。 こういう素材は素早く探せてなんぼだと思っているので、便利に使えそうです。 ※ただのリンク集なので、それぞれのサイト内の規約や著作権の確認は忘れずに。 Free Stock Images & Videos ~ AllTheFreeStock.com 後藤賢司 東京と大分を拠点として全国的に活動しています。出版社、デザイン会社、Web制作会社、企画・マーケティング会社での経験を生かし、媒体にとらわれない提案・企画・設計が得意です。自社メディア運営によるノウハウを持ち、様々な視点を活用した提案をしております。よつばデザイン(後藤賢司)は、中小企業庁「中小企業・小規模事業者ワンストップ総合支援事業(ミラサポ)」の派
レスポンシブなフロントエンドフレームワークFoundationを提供するZurbは、2014年8月21日に同社のブログでFoundationの新バージョン5.4とともに、Foundationのアクセシビリティを高めていくことを発表した。 ブログ記事では、多くのデザイナーがアクセシビリティについて語るようになってきていると指摘。アクセシビリティのないウェブサイトはスロープのない建物と同じ。W3CによるWAI-ARIAガイドラインなどに準拠したサイトをデザインすべきだとしている。 Foundationの各コンポーネントのドキュメントページには、それぞれアクセシビリティのセクションが追加され、どのようにマークアップすれば良いかが記載されている。たとえば、Topbarコンポーネントのアクセシビリティのセクションでは、role=”navigation” 属性を追加したり、オフキャンバスナビゲーション
最近Unsplashをはじめ、Tumblrベースの高品質な著作権フリーの写真サイトが数多くなってきています。 そのうちまとめられたら良いなと思っていたら既にありました。素晴らしい。 まとめられてるのは下記の通り。 UNSPLASH LITTLE VISUALS NEW OLD STOCK SUPER FAMOUS GRATISOGRAPHY GETREFE JAY MANTRI MAGDELINE BREAKING PIC TRAVEL COFFEE まとめられてるとは言っても横断検索などが出来る訳ではなく、あくまでもアクセスする際の起点として使える形です。 高品質な写真が使えるのは非常に助かりますね。 TheStocks.im best royalty free stock photos in one place 後藤賢司 東京と大分を拠点として全国的に活動しています。出版社、デザイン会
WordPressの代替になる?ドラッグ&ドロップだけでサイトが作れてしまう「Weebly」 | U-NOTE【ユーノート】という記事を読みました。 Webサイトが簡単に出来る事について説明はしているものの、値段やその他の機能については書かれてなかったので調べてみました。 Weeblyは簡単に登録できて日本語にも対応 ユーザー登録は非常に簡単。 登録するとすぐにテーマ選択画面に。 全てではありませんが「日本語」にも対応しています。 これはありがたい人も多いのではないでしょうか? 数十種類のテーマからデザインを選べます 良い感じのものが揃っています。 テーマにマウスを置くと、ボタンの色などになるキーカラーを選べます。 あとはドラッグ&ドロップでパーツを入れて行きます。 フォームのパーツも揃っているので不足感とかは無いです。 右上のほうでPCとモバイルの表示を切り替えられます。 Webサイトの
ブロック要素の高さを揃えてくれる jquery.matchHeight.js レスポンシブでも動作するとの事なので良さそうです。 demo IE8以降 ロード後・ウインドウのリサイズ後に更新 レスポンシブ対応 ライセンスはMIT MITライセンス このソフトウェアを誰でも無償で無制限に扱って良い。ただし、著作権表示および本許諾表示をソフトウェアのすべての複製または重要な部分に記載しなければならない。 作者または著作権者は、ソフトウェアに関してなんら責任を負わない。 MIT License – Wikipedia liabru/jquery-match-height 後藤賢司 東京と大分を拠点として全国的に活動しています。出版社、デザイン会社、Web制作会社、企画・マーケティング会社での経験を生かし、媒体にとらわれない提案・企画・設計が得意です。自社メディア運営によるノウハウを持ち、様々な視
CSSを短く読みやすいように変換してくれるサイト「SHRTHND」。 オレオレ記法で書いている人の記述確認にも使えそうです。 SassやLessを導入してない人は、納品前の整形用途に使っても良さそうですね。 �SHRTHND 後藤賢司 東京と大分を拠点として全国的に活動しています。出版社、デザイン会社、Web制作会社、企画・マーケティング会社での経験を生かし、媒体にとらわれない提案・企画・設計が得意です。自社メディア運営によるノウハウを持ち、様々な視点を活用した提案をしております。よつばデザイン(後藤賢司)は、中小企業庁「中小企業・小規模事業者ワンストップ総合支援事業(ミラサポ)」の派遣専門家として認定を受けたり、大分商工会議所が主催する「大分商工会議所ビジネスなんでも応援隊」のサポートメンバーとして、中小企業様の経営課題や広告・看板・宣伝ツール・Webサイトなどのプロモーション相談を受け
Bootstrap3のグリッドを各デバイス向けにドラッグ&ドロップで配置。 そのコードを出力してくれるサービス。 まだBootstrapのグリッドに慣れていない方や、さらっとグリッド配置してベースを作りたいなんて時に便利そうですね。 左側のエリアでデバイスを選んで配置すると、右側のエリアにはこのように表示されます。 LESS表示 Jadeで表示 Shoelace – Visual Bootstrap 3 Grid Builder 後藤賢司 東京と大分を拠点として全国的に活動しています。出版社、デザイン会社、Web制作会社、企画・マーケティング会社での経験を生かし、媒体にとらわれない提案・企画・設計が得意です。自社メディア運営によるノウハウを持ち、様々な視点を活用した提案をしております。よつばデザイン(後藤賢司)は、中小企業庁「中小企業・小規模事業者ワンストップ総合支援事業(ミラサポ)」の派
あのサイトのガイドラインってどこだっけ?って探す事は良くあります。 主要なサービスのガイドラインのリンクをまとめてくれてるのがFind Guidelines。 これは便利ですね。 下記のようにマウスオーバーでブランドカラーが確認できるのも良いですね。 Find Guidelines – The fastest way to brand assets. こちらの記事もあわせてどうぞ。 様々なサービスのブランドカラーがわかるBrandColors | Webクリエイターズニュース 後藤賢司 東京と大分を拠点として全国的に活動しています。出版社、デザイン会社、Web制作会社、企画・マーケティング会社での経験を生かし、媒体にとらわれない提案・企画・設計が得意です。自社メディア運営によるノウハウを持ち、様々な視点を活用した提案をしております。よつばデザイン(後藤賢司)は、中小企業庁「中小企業・小規模
高品質なものがたくさん掲載されています。 用途によってカテゴライズされているのでとても見やすいのも良いですね。 Pttrns – Mobile User Interface Patterns 後藤賢司 東京と大分を拠点として全国的に活動しています。出版社、デザイン会社、Web制作会社、企画・マーケティング会社での経験を生かし、媒体にとらわれない提案・企画・設計が得意です。自社メディア運営によるノウハウを持ち、様々な視点を活用した提案をしております。よつばデザイン(後藤賢司)は、中小企業庁「中小企業・小規模事業者ワンストップ総合支援事業(ミラサポ)」の派遣専門家として認定を受けたり、大分商工会議所が主催する「大分商工会議所ビジネスなんでも応援隊」のサポートメンバーとして、中小企業様の経営課題や広告・看板・宣伝ツール・Webサイトなどのプロモーション相談を受けております。 その他、WordPr
このウェブスペースへは、まだホームページがアップロードされていません。 早速、エックスサーバー上へファイルをアップロードしてみましょう。 アップロードの方法などは、サポートマニュアルをご参照ください。
ブラウザ用の小さなfavicon画像を設定しているサイトは多いだろう。しかし、iOSやAndroidのホームスクリーン、Windows8タイル、Windowsタスクバーなどに最適化した各種サイズのfaviconまで用意するのは多少面倒だ。このサイトを使うと、1つの画像から14通りのアイコン画像を自動で生成してくれる。 Website: http://realfavicongenerator.net/
手描きのスケッチをロゴにしてくれるサービスLogoshi。 下記のように適当に書いたスケッチが自動で変換されて右側のようになります。 価格はたったの5ドル。 ロゴは本来こんな風に作るものではありませんが、判別マークとしての役割で十分と考えてる人には良いと思います。 (ロゴは企業理念や社風やビジョンやブランド価値など様々な要素を検討のうえで作られるものです。) 実際にこのようなイメージに落とし込む見せ方は良いですね。 Logoshi – Sketch a Logo 後藤賢司 東京と大分を拠点として全国的に活動しています。出版社、デザイン会社、Web制作会社、企画・マーケティング会社での経験を生かし、媒体にとらわれない提案・企画・設計が得意です。自社メディア運営によるノウハウを持ち、様々な視点を活用した提案をしております。よつばデザイン(後藤賢司)は、中小企業庁「中小企業・小規模事業者ワンスト
このページを最初にブックマークしてみませんか?
『エックスサーバー サーバー初期ページ』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く