IDEA * IDEAドットインストール代表のライフハックブログ
レイアウト作りを簡単にしてくれるCSSグリッドシステム
CSS でのレイアウト、段組み作りがとっても簡単にできる、CSS グリッドシステムをご紹介。既に使っている人もたくさんいるとは思いますが、未体験の人はぜひ試してみてくださいね！ Web デザインに欠かせない、CSS でのレイアウト作り。コンテナ作って、ここにラッパー作って、メインが 600px で padding が 20px だから、サイドバーが、えーと … なんてことになりがちです。そんな面倒な作業がイヤだなーという人におすすめなのが、CSSグリッドシステム。全ての Web デザインに使える訳ではありませんが、結構重宝します。すでに使っている人もたくさんいると思いますが、こんな方法もあるんだよーということでご紹介します。 1. CSSグリッドシステムとは？ CSS グリッドシステムというのは、レイアウトを均等に分けて、マス目上に考えるレイアウト。何が便利かっていうと、この段は4等分にし
配色に自信がなくても！Webデザインが好きになる配色ツールと使い方
2016年12月13日 Webデザイン, 便利ツール, 色彩 以前書いた記事「配色パターンからWebデザインを考える」を見た方から「いい配色だなーと思ってもうまく使いこなせない」という意見をいくつか頂きました。確かにすてきな配色をどうデザインに取り込んでいいのか、というのは難しいところです。今回は簡単に配色を提案してくれるオンラインツール「ウェブ配色ツール Ver2.0」を使って配色をWebデザインに取り込む方法を紹介します。 ↑私が10年以上利用している会計ソフト！ ウェブ配色ツールを使った基本的な配色方法 まずこの「ウェブ配色ツール Ver2.0」について。テーマカラーを一色選べば、それにあった配色を提案してくれる配色ツールです。Webサイトのプレビューを見ながら配色の調整ができるので、初心者さんにもおすすめです！ オレンジを元に色相差0°で配色した例。色相差を0°にすると同系色（＝同
Browsershots
No active screenshot factories. Please try again later. What is Browsershots? Browsershots makes screenshots of your web design in different operating systems and browsers. It is a free open-source online web application providing developers a convenient way to test their website's browser compatibility in one place. When you submit your web address, it will be added to the job queue. A number of
Mockingbird has Shut Down
Mockingbird is no longer in operation. We’re hoping to open-source the code sometime in the near future. In the meantime, some simple alternatives, in a similar spirit to Mockingbird, are: Excalidraw: https://excalidraw.com TLDraw: https://www.tldraw.com If you need a more comprehensive mockup solution, you might want to check out the following: FigJam: https://www.figma.com/figjam/ MockFlow: http
このサイズだとこのサイトはどう見えるかな？が簡単に試せる『TestSize』 | 100SHIKI
似たようなツールは他にもあるが、シンプルで使いやすかったのでご紹介。知っておいても損はないだろう。 TestSizeでは、「このスクリーンサイズだとこのサイトはどういう風に見えるかな？」をシミュレートすることができる。 いくつかのサイズが用意されているが、矢印キーの上下で切り替えていくことができる点が便利だ。 また余計なメニューなども「f」キーでさっと消すことができる。 日本語のサイトも問題なく通るので、ちょっとしたテストにいかがだろうか。
画面解像度について役に立つサイト : 状況が抉る部屋
2010年02月23日08:35 画面解像度について役に立つサイト カテゴリインターネット 「サイトに訪れているユーザーの画面解像度ってわかりますか？」 「どれくらいの縦幅、横幅で作ればいいですか？」 との質問があったので、役に立つサイトをまとめてみます。 (前者の質問はすでにサイトがある場合はアクセス解析見れば良いですが) 確かに、サイト作るときって気になりますよね。 今webサイトは幅何pxで製作されているのか | Liquid Paper Clips 各ポータルサイト等の平均的な横幅がわかります。 740pxあれば、無難です。960pxでもほぼ大丈夫だとは思います。 あと、立ち位置が似ているサイトがあるでしょうから、そこも参考に。 解像度別のユーザー使用率を示したキャンバス | CREAMU こちらは視覚的にもわかります。統計もあります。 Browser Size Google La
画面解像度について役に立つサイト - @toshiyuki83 Webサービス更新履歴＆技術情報
「サイトに訪れているユーザーの画面解像度ってわかりますか？」 「どれくらいの縦幅、横幅で作ればいいですか？」 との質問があったので、役に立つサイトをまとめてみます。 (前者の質問はすでにサイトがある場合はアクセス解析見れば良いですが) 確かに、サイト作るときって気になりますよね。 今webサイトは幅何pxで製作されているのか | Liquid Paper Clips http://lpclips.net/2008/04/post_58.html 各ポータルサイト等の平均的な横幅がわかります。 740pxあれば、無難です。960pxでもほぼ大丈夫だとは思います。 あと、立ち位置が似ているサイトがあるでしょうから、そこも参考に。 解像度別のユーザー使用率を示したキャンバス | CREAMU http://blog.creamu.com/mt/2009/08/post_147.html こちらは
真面目にエロサイトを作ってみた【デザイナー編】 - BLOG｜ASTRODEO
東京都台東区で黙々とウェブでサービスを開発している株式会社アストロデオのホームページです。
単機能トップページというデザイン手法が人気急上昇中 | Moz - SEOとインバウンドマーケティングの実践情報
最後にデザインの話題を取り上げてからずいぶん経ったけど、そろそろまた書くべき頃合いだと思う。 今回焦点を当てるのは、レトロ（かなり前から用いられている）でありながら今また勢いを増しつつある（少なくとも僕は人気上昇中だと感じている）デザインスタイルだ。もっと具体的に言うと、目的を1つに絞り込んだトップページのことだ。 最初に、簡単な例を挙げる。GmailやYahoo!メールのメールアドレスを入力すると、そのアカウントに登録されている連絡先（知り合い）を、さまざまなソーシャルネットワークで探してきてくれるSpokeoというサービスだ。 このデザインの目的はただ1つ、製品の機能を示すためにメールアドレスを入力してもらうことだけで、そのほかのことには目もくれていない。登録ユーザー向けのログインページやブログ、説明ページへアクセスするリンクといった副次的なリンクが少々と、信用度を高めるのに役立つ大手
30分でできる！Webサイトを高速化する6大原則 (1/4)
Webサイトを制作するとき、「パフォーマンス」を気にしたことがあるだろうか？ もしまったく気にしたことがないなら、気をつけた方がいい。閲覧に時間のかかる“遅いWebサイト”はユーザーにフラストレーションを与え、閲覧をやめさせてしまう恐れがある。 下記のグラフは、「Simple-Talk」という海外のオンラインメディアで発表されたユーザー調査の結果だ。アンケートページの表示にかかる時間を意図的にコントロールし、表示時間によってユーザーが感じるフラストレーションの違いを調べたものだ。 縦軸がフラストレーション（10段階）、横軸が表示までの時間を表している。1～5秒以内にページが表示された人に比べ、ページ表示までに5秒以上かかった人は2倍以上もフラストレーションを感じている。フラストレーションがあまりに高ければ、せっかく何らかの目的を持って訪れてきたユーザーも待ち切れずにブラウザーを閉じてしまう
これは絶対覚えておいた方がよいシルエットの素材集:phpspot開発日誌
これは絶対覚えておいた方がよいシルエットの素材集。 85サイトのフリーかつハイクオリティなシルエット素材集が物凄い勢いでまとまっています。 覚えておくと色々な場面で使えることは間違いなさそう。 人型だけじゃなくて、動物や昆虫・植物などそろってます。 リンク先は以下のＵＲＬから参照してください 85 Free High Quality Silhouette Sets | Graphics
モバイルサイトの魅力を引き出す配色術 : LINE Corporation ディレクターブログ
モバイルビジネスユニットのイシカワです。 端末の進化によって、モバイルサイトでも表現の自由なサイトが多くなってきました。 見せ方ひとつとっても、Flash を多用したリッチなコンテンツにしたり、絵文字や装飾で賑やかなコンテンツにしたり様々ですが、今回は物凄く基本的な「色」について書いてみたいと思います。 色の効果にも色々とあるので、掻い摘んで説明をしたいと思います。 視認性 視認性は色の見えやすさの事をいいます。 背景色と文字色とで明度差が小さいと、文字が見えにくくなり、逆に背景色と文字色の明度差が大きいと、文字は見えやすくなります。また明度以外にも彩度や色相の差も関係してきます。なので、文字の読みやすさに与える配色の場合は可読性とも言います。 背景色は白、文字色は赤で文字のみ明度に差をつけてみました。 左上の文は明度差が小さいので読み難くなっていますよね? 逆に右下の文は明度差が大きいの
200+ Free Exclusive Vector Icons: ‘Primo’ | Webdesigner Depot
Today we bring you a set of over 200 free and exclusive vector icons called “Primo”. The icons are provided in both raster and vector formats: The transparent PNG versions are 48×48, 64×64 and 128×128, and we have also included Illustrator files so that you can resize the icons as needed. The icons are completely free for personal and commercial use and they’re being released exclusively to all ou
料金について - | Swing Web Creation [札幌のホームページ制作・MovableType・WordPressカスタマイズ・Webデザイン・更新代行]
北海道札幌市のフリーランスWebデザイナー。MovableTypeやWordPressを使ったホームページの作成やビジネスブログの構築、HTML＋CSSコーディングやWeb講師など幅広くお引き受けしています。料金について - | Swing Web Creation [札幌のホームページ制作・MovableType・WordPressカスタマイズ・Webデザイン・更新代行] サイトメニュー 札幌・札幌近郊のホームページ制作・ブログカスタマイズをおこなうフリーランスのWebデザイナーです。企業サイト・団体サイト・XHTML＋CSSコーディングやWeb制作講師・レクチャーもおこなっています。 料金について ホームページ制作料金について Swing Web Creationでは、基本的に「1ページあたり何円」という価格設定はしていません。 可能な場合は、最初にお客さまがご用意できる予算を
今だからこそ、「軽量なウェブサイト」を作ることが重要、というお話。 - Feel Like A Fallinstar
最近はJavaScriptのライブラリ整備や、大きなモニターが増えたせいもあり、リッチな見た目のサイトが増えてきたなーって思います。 でも、その一方で、それ以上に増えている様相なのが「低速度回線」のユーザ。 今だからこそ、技術をきちんと理解して軽いウェブサイトを作るべきなんじゃないか、というお話を少し。 増えているのは、フレッツよりも「持ち歩きPC」「スマートフォン」のアクセス これは今木が運営する、とあるポータルサイトの利用者の接続速度の変化のデータです。 月間PVが大体150,000位で、割と昔からあるタイプのまじめなコンテンツのサイト。携帯は対応していませんし、IT系とかに偏ったコンテンツもありません。 見ると分かる傾向は ダイヤルアップ、実はあまり減っていない ケーブルはそこまで延びていない Unknownが年々増えている ADSL / 光(T1）も割合としてはむしろ減少傾向 グラ
faviconの設定｜初心者ホームページ作成術
ファビコン-favi・con-、ファブアイコン-fav・icon-はFavorite iconの略で、サイト専用のアイコンのこと。 Favorite iconを使うとブラウザのURL欄やリンクバー、ブックマーク、ショートカットに専用アイコンを表示出来ます。 この、Favorite iconの設定方法を解説します。 ブラウザのURL欄やリンクバー、ブックマーク、ショートカットにサイト専用のアイコンを表示をさせるFavorite iconの説明です。 ちなみに、Favorite icon（フェイバリット・アイコン/お気に入りアイコン）を略して ファビコン-favi・con-、ファブアイコン-fav・icon-とも呼ばれる場合があります。 faviconってなんだ? 下の絵には、ブラウザのURL欄・リンクバー・ブックマーク・ショートカットに、このサイトの独自アイコン が有ります。 この独自アイコ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Webディレクターズマニュアル
5万円！専門学生が創るオリジナルホームページ「デザイン甲子園」
比較テストで見えた成果を出すモバイルECサイトのユーザビリティ（第8回） | モバイルサイト構築のユーザビリティいろは
