ごめんなさいね。 - Lopan.jpWebデザインとかサイト制作について、知ってる事知らない事を展開するサイト。
Grid 日本語版
なぜ、レスポンシブに労力を費やすのか? 私達は全てのデバイスにおいて、スクリーンのサイズや縦横の方向といったユーザーの環境に左右されずに、ウェブサイトが利用しやすくなることを目指しています。 断片化された世界 2013年現在、数千種類のデバイスとスクリーンサイズがインターネットにアクセスしています。それら全てに対して、それぞれレイアウトを設計するのはもはや不可能です。そんなことより、デザインにより流動的なアプローチを取り入れるべきでしょう。 モバイルファースト 最近になって「モバイルファースト」という言葉がそこらじゅうで聞かれるようになりました。その言葉は、モバイル向けのスタイルから始めて、必要とされる時に大きなスクリーンに最適化したスタイルを適用するということを意味します。言い換えると、作成したモバイル向けのスタイルがデフォルトになり、それ以降に書き換える必要はないということです。それは
新しい写真素材サイトがどんどん増えてる！高品質な写真画像がクレジット表記無しで無料利用できるサイトのまとめ
今年に入って、CC0で利用できる新しい写真素材サイトがどんどん増えてます。 Webデザインや紙のデザイン、プレゼンや企画書などにも無料で利用できる高品質な写真素材がダウンロードできるストックフォトサイトを紹介します。 ちょっと写真素材を使いたい時など、クレジット表記の義務がないと気軽に使えて便利ですね。
配色に悩んだ時に役立つ便利なサイトやカラー関連ツールまとめ - NxWorld
「いつも同じような感じになってしまう」「このキーカラーに対してどんなアクセントカラーが合うのか」といったデザイン（配色）時の悩みを手助けしてくれるものやインスピレーションをもらえるもの、オリジナルのカラーパレットを簡単に作成・出力できるなど、配色・カラーに関連する便利なサイトやツールのまとめです。 似たようなサイトも多いですが、使いやすさ・見やすさ・情報量などの点でそれぞれ違いがあるので、こういったツールをお探しの方はひと通り試して自分に合ったものを見つけてみてください。 December 22, 2014 追記 「Material Design Color Palette Generator - Material Palette」「Material UI | Material UI Colors」「flatuicolorpicker : Best Flat Colors For UI D
配色パターンを決める際にお世話になっているサイトをご紹介
「なんかいつも同じような配色になってしまう」「思い切った配色ができない」と悩んだときに個人的にお世話になっているサイトを紹介します。 かなり有名なサイトばかりですが参考になればうれしいです。 メインの色を決めるたいときに まず、ウェブサイトのメインとなる色を決めるときに使っているサイトを紹介します。 WEB色見本 原色大辞典 - HTML Color Names この手のサイトは色々ありますが、私はこのサイト一筋です。様々な色が載っていますが、以下のページの色を参考にすることが多いです。 日本の伝統色 和色大辞典 - Traditional Japanese Color Names 世界の伝統色 洋色大辞典 - Traditional World Color Names ビビッドカラー - Vivid Colors カラーピッカーもよく使います。 カラーピッカー - 原色大辞典 アクセント
コーディングの必須ツールになりそう。ステキなCSSスタイルガイドを生成する｢styleDocco｣の導入とgrunt.jsでの自動化のメモ | Mnemoniqs Web Designer Blog
プロジェクトでコーディングする時に、複数の作業者がいる場合にスタイルガイドはとても重要です。 特にスマートフォン向けのサービスでは、モジュールの共通化や画像のスプライト化がもろにページ表示速度に影響するため、より精度が高く細かいアップデートに耐えうるCSSスタイルガイドが必要になります。これをExcelやPowerPointで管理していると、細かい変更の反映が大変だし、なにより見にくい。 そんな時、こちらの記事「CSSプリプロセッサでスタイルガイド」 inkdesignの中で、 スタイルガイドは”生きている”ドキュメントでなければいけない というシビレるキャッチで紹介されていた「styleDocco」というスタイルガイドジェネレータを発見。 これはなんだか良さそうだ！とプロジェクトに取り入れてみることにしたので、導入とか設定とかをメモ。 「styleDocco」ってなに？ 「style
なぜリセットではなく Normalize.css を使うのか | Yomotsu net
まずは、歴史をみてみよう。 初期* { margin:0; padding:0; border:none; } table レイアウトから CSS レイアウトへの移行期に考案された。すべてゼロにするというコードで、実装者が書いたコードのみが適用できるという手法。弊害として input 要素の枠線など、本来、スタイルをゼロにする必要がない箇所までスタイルが消えてしまい、しょうがないので更に上から枠線を加えるなどが必要になっていた 中期今から 5 年ほど前の 2008 年、エリックメイヤー氏によるリセット CSS や YUI のリセット CSS が登場した。全称セレクター「*」 ではなく、要素セレクターそれぞれに対して CSS をゼロにするという手法。 ただし、p や見出し要素の上下マージンや li のリストスタイルまでも依然としてゼロになっていたため、次のような、本末転倒な HTML まで
目指せ爆速WEB屋！過去2年間かけて知ったリソースを駆使して作るサイトの制作手順！ | バンクーバーのうぇぶ屋
『一時間前の自分より、一秒でも作業スピードを上げる努力をなさい。』 僕が心の底から尊敬する人に以前言われた言葉です。今でも僕の背中にはこの言葉が刺青として刻まれて……いたらどうしよう恥ずかしい（汗） さて、毎年年末年始は僕にとって今まで自分が意識してきた作業スピード、そしてクオリティの両面を試す時期です。去年作ったものより、どれだけクオリティを上げることができ、どれだけ作業スピードを上げることが出来たのか。まぁ、タイトル通り、完全自己満足万歳な記事なので、去年よかちょっとスキル／スピード上がったかなぁと僕自身が感じられたら良しとしてます（笑 とりあえず、難しい話はありません、今回はみんな大好きWordpressでブログを作ります。基本、僕の作業手順を追いながら制作の助けになったリソースを紹介していく感じになりますが、何かの参考になれば嬉しい限りです。制作したサイトは公開してますので、最後に
Step-by-Step Creating a Website Guide
2014年8月17日 Webサイト制作 8回に渡り連載した「実践で学ぶWebサイト制作ガイド」がついに終わったので、ここで簡単にまとめておきます。この記事では基本的な流れを説明していますが、リンクをクリックでより詳しい説明記事を読むことができます。これからWebサイトを作ってみたい！という人のお役に立てればいいなあと思います :) サンプルファイルもあるので、ご自由にダウンロードしてくださいね！ ↑私が10年以上利用している会計ソフト！ サンプルファイル 今回作成したファイルをサンプルとして配布します。参考になれば幸いです。説明するために制作したものなので、学習目的以外でのご利用はご遠慮ください。Google Chrome, Safari, Firefox, IE8・9で動作確認済み。 デモ ダウンロード 1. プランニング 誰のため？何のため？Webサイトを作り始める前に。 突然Phot
第一回 プログラマ向けデザイン勉強会 #design4p で「ズルいデザインテクニック」発表させていただきました。 - 納豆には卵を入れる派です。
どうも。 書くのが遅くなりすぎてもう半月ほども前のことになってすごく今更感があるのですが、書いておくべきことを書きそびれると、その後出てくる他の書きたい小ネタがどんどん書けなくなっていってドンづまるパターンになるので、やはり書いておきますね。。 先日、第一回 プログラマ向けデザイン勉強会というイベントで下記のスライド発表させていただきました。 少ない手間と知識でそれなりに見せる、ズルいデザインテクニック// Speaker Deck 反響の大きさに驚き！ありがとうございました。 実はあんまり発表自体は、盛り上がったという手応えがあまりなくて、一方で他の2人の発表が素晴らしすぎて、割としょんぼりしながら帰ってきたんですが、スライドをアップロードしたらあれよあれよという間に2000ブクマ超え…驚きました。読んで下さった皆様、ありがとうございました。何が原因だったのか考えてみたのですが、デザイン
無料で商用利用できてクレジット表示も不要の画像素材検索サイト「タダピク」
仕事上で使用する画像はウェブ上で見つけにくく、いい画像だな、と思っても商用利用ができなかったりクレジット表記が必要だったりする場合もあります。そんな時に便利なのが横断検索サイト「タダピク」で、海外や日本の計24の画像検索サイトから商用利用OK・クレジット表示不要の画像素材を横断検索することが可能です。 タダピク（tadapic） - 商用利用OK・クレジット表示も不要の画像素材検索エンジン http://www.tadapic.com/ トップページの検索欄にキーワード「子猫」を記入し、検索ボタンを押すと…… こんな感じで子猫の画像が表示されます。 気になる画像をクリック。 すると、画像元のサイトに飛びます。 なお、検索対象は「画像」なので、写真だけでなくイラストも一緒に検索されます。 検索時にはイラストやアマチュアカメラマンによる写真素材サイト足成の写真を除外したり、日本のサイトに絞り込
無料で商用利用も可能なアイコン200個がセットになった「Glyphish」
スマートフォン用アプリのツールバーやタブバー、ウェブサイトなどでも使えそうなアイコン200個がセットになったのが「Glyphish」。無料で商用利用も可能で、ファイルはPNG形式とPSD形式の2種類があります。 Glyphish – Great icons for great iPhone & iPad apps http://www.glyphish.com/ どのようなアイコンがあるかというのは以下のような感じ。 ダウンロードの際は画面右上にある「FREE」となっているリンクをクリック。 こんな感じのページが出てくるのですが、下の方の「I'm not ready to go pro. Get free version」というリンクからダウンロードできます。 なお、無料で商用利用は可能ですが、再配布と販売は禁止されています。
自分でできるデザイナーズ・サイト、Bootstrapをさらに簡単に最速でUIを構築できる「Jetstrap」は全てのウェブ制作関係者必携サービスとなるか 【増田 @maskin】 | TechWave（テックウェーブ）
「アイディアはあるんだけど、モックすら作れないIT起業家」「“UIだけなら自分で作れる” とやってみたけど、見にくいページにしかならない、どうしよう、、、」。高度なテクニックは不要、でも、やっぱりデザイナーさんに依頼しないといけないシーンが多いこの業界。 しかし、「Twitter Bootstrap」(以下 bootstrap)の登場により、多くの人がデザイン性の高いページデザインを短期間で作れるようになり世界は変わった。bootstrapは、プログラマーやディレクターなどが、最低限のコードの組み合わせでスッキリと解りやすいユーザーインターフェイス(UI)を構築できるライブラリ(支援プログラム群)のこと。 Bootstrapの登場で、スタートアップはスピーディにページを作りあげ、プログラマーは必要なページを “とりあえず” 作っておくくらいのことをするのが手軽になった。ただ、bootstr
スマホサイトに入れると使いやすくなる！おすすめjQuery4選！ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
どうも、はやちです_(:3」∠)_ スマホに使うとよりサイトが見やすくなるjQueryをまとめてみました。 アコーディオン アコーディオンみたく開閉式のメニューが実装できるjsです。 記事の多いコンテンツをまとめるのに便利ですね。 ■動きをみる HTML <dl class="acordion"> <dt class="trigger">アコーディオンメニュー<span class="open-close">open</span></dt> <dd class="acordion_tree">テキストテキストテキストテキストテキストテキストテキストテキスト</dd> <dd class="acordion_tree">テキストテキストテキストテキスト テキストテキストテキストテキスト</dd> <dd class="acordion_tree">テキストテキストテキストテキストテキストテキ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
🎨 Material Design Colors, Color Palette | Material UI
全国Web制作会社リスト オンラインデータベース
Flipsblog.jp
IDEA * IDEA
とっさのデザイン〜ボタン編〜
JPEGmini | Leading JPEG Compressor & Image Size Reducer
