あたし、このデザインを納品したら故郷に帰って結婚するんだ。vol.05｜株式会社アクトゼロ｜クリエイティブブログこんにちは、haruです。 今回はweb制作現場で頻繁に使われる用語についてまとめてみました。 WEBデザイナー、業界の方ならばよく耳にする用語ではないでしょうか？ またその言葉の裏に隠された意味にもツッコんでみました。 笑って楽しんで読んでいただけたらうれしいです。 それではどうぞご覧ください。 Vol.05 Web制作現場頻出用語辞典デザイナー編vol.1 次回は7月中頃に更新です！お楽しみに…。
「Web制作のリアルな工数と見積もりの話」の話をしようじゃないか！
raf00がWEB制作の見積もりについて書きたいなぁとか言いながら1年半が経ちました。 で、いずれ書かなきゃなーと思いながら過ごしていたら、WP-Dさんが非常に興味深いエントリを上げられていましたので、これに便乗する形であれこれ書きちらしてみたいと思います。 WordPressのリアルな工数と見積もりの話をしようじゃないか！ | WP-D ウェブ制作の見積もりを金額付きで晒してやろうじゃないか！ | WP-D ■あの見積もりは妥当か否か なかなかブコメなどの反応が興味深い見積もりサンプルですが、現在の（上場企業の制作業務に対応できるくらいには）真っ当なWEB制作会社が企業向けに出す見積もりとしては項目・工数・価格的には概ね妥当かつ適切だなと感じられます。サンプルであるがためにこまごまとボヤけた点はあるものの、WEB制作会社のプロデューサー・ディレクターやクライアント企業のWEB担当者ならば
ブログ用の無料写真素材を探すときに便利なサービス
クレジット表記・リンク不要の無料写真素材 / 写真AC / 無料写真フリー素材「写真AC」他...全20件
ウェブデザインにおけるカラーのグリーンの重要性と効果的な使い方 -Eco Friendly Green
ウェブデザインにおけるカラーのグリーンの重要性を学び、実例を見ながら制作における効果的な使い方や気をつけたいポイントを紹介します。 Anatomy of Colors: How to Create Eco-Friendly Green Website Anatomy of Colorsのシリーズは前回、ホワイトを紹介しました。 ウェブデザインにおけるカラーのホワイトの重要性と効果的な使い方・気をつけたい4つのポイント 最近はデスクトップの壁紙もベタ塗りグリーンなので、今回はグリーンを紹介します。 以下、グリーンの各ポイントを意訳したものです。 グリーンの重要性 グリーンの基礎知識 ウェブデザインにおけるグリーンの使い方 グリーンを使うことの意味 グリーンの文化的な背景 さまざまなグリーンの使い方 グリーンを使ってみよう グリーンの重要性 インスピレーションを与える最もよい情報提供元は何です
スマートフォンサイトのHTMLコーディングメモ12個 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
display:table-cell; を活用する リキッドレイアウトのコーディングにすごく便利。 親要素に display:table; 子要素に display:table-cell; 記事リストなど、画像とテキストを横並びにするときに。 均等に横並びにしたいときに。 タップ時のカラー設定 CSSで以下のように設定。アルファ値も設定可能。 -webkit-tap-highlight-color: rgba(255,105,183,0.6); 画像、iframeに max-width を指定 img・iframeは、サイズが大きすぎて画面からはみ出すことがあるので max-width:100%; を指定する。 word-break:break-all; を指定 スマホは幅が狭いため、長いURLなどが1行に入りきりません。 word-break:break-all; を適宜指定する。 フォ
有名Webサービスのデザインから考える、上手な料金プランの見せ方 | Goodpatch Blog
複数の料金プランを持つWebサービスを利用する際、皆さんはどういう基準でプランを選びますか？私は自分に必要な機能は何なのか、料金に見合った内容かどうか、他のプランと比較してお得なのはどれなのか等を考えながら検討していきます。そのために一目でそれぞれのプラン内容がわかったり、各プランを簡単に比較できるデザインだと決めやすいのですが、自分にぴったりのプランがすぐにわからないと結局どれも申し込まない、なんてことも。そこで今回は複数のプランを持つWebサービスの料金表を見ながら、どんなデザインをしてユーザーに魅力を伝えているのかチェックしてみたいと思います！ SQUARESPACE http://www.squarespace.com/pricing/ プランを3つ用意しているSQUARESPACEは、おすすめの$16のプランを人気のプランとして画面の真ん中にくるように配置しています。緑背景の”M
白と黒で創られたシンプルですごいWebサイト10選
こんにちは。 バランスにこだわったシンプルなサイトは見ていて飽きないものです。 今回は、白と黒をベースに作られたシンプルですごいWebサイト10個ほど選んでみました。 Kenji Saito Kenji Saito氏のポートフォリオです。 動きを含めバランスも非常に優れています。Flashじゃないのがまたすごい… Mac Pro ゴミ箱などいろんなネタにはされましたが、相も変わらずサイトのデザインは素晴らしいですね。恐れ入ります。 サイト1枚で製品の良さを存分に説明できてますね。 すごいうぇぶ [browser-shot url=”http://sugoiweb.nezihiko.com/” width=”550″] 見た人が口を揃えて「すごい！」といってしまうサイト。面白法人カヤックの佐藤ねじ氏の作品。 本の書き出し 書き出しの1文だけで本を選ぶ事が出来るサイトです。 日本語をうまく使っ
デザインセンスが壊滅的な私が良い感じの配色を実現させている方法 - あなたのスイッチを押すブログ
資料の出来栄えを大きく左右する「色」。資料を作り込むほどのめり込み、抜け出せなくなってしまう。何が正解か分からず、全く抜け出せない泥沼。 「もうちょっと青みを…」「いや、赤みが強すぎるから、彩度を落として…」「この色の組み合わせはないなぁ。何色を差し色にしよう…」 色は無限大。限りある知識と経験だけでは、なかなか正解の配色を手に入れられないことでしょう。 そんな時に私が役立てている、配色に関するお話しを致します。 カラーパレットは自作しない そもそも私は美術的なセンスがありません。美術の成績も、彫刻などの造形ものはそこそこでしたが、絵画的な課題はてんでダメでした。 そんな私が自分で配色を作ろうと思ったら、時間がいくらあっても足りません。そしてクオリティは、かけた時間に反比例していくでしょう。 ですので私は、自分で作りません。他の色んな物を利用します。 それは時に写真や画像であったり、人が作
ノンデザイナーこそ押さえておきたい! UI/UXが学べる神スライド7選 | Find Job ! Startup
競合に負けないWebサービスをつくるため、UI（User Interface）、UX（UserExperience、ユーザー体験）にこだわるのは、もはや常識。良いUI/UXはチーム全員で考えることが、良いサービスをつくる秘訣です。 エンジニアやWebディレクターも学んで損はしません。もちろん、本職デザイナーの方々にも役立つ7つのスライド厳選まとめです！ 目次 基礎知識 １．UXのためのUIデザイン ２．UX is not UI ３．ククパド美ちゃんと学ぶ！クックパッドのUI改善プロセス：前編 応用編（Webサイト） ４．ククパド美ちゃんと学ぶ！クックパッドのUI改善プロセス：後編 ５．コンテンツで改善する UI デザインの極意 応用編（スマホアプリ） ６．UI＆UX / 重要なのは、毎日さわって嬉しいUI UX! 応用編（タブレットアプリ） ７．ニコニコ超デザイン-
GoogleのアイコンなどのデザインガイドラインをGoogleのデザイナーが公開中
ChromeやGmailのアイコンはシンプルであり、一度使うと見るだけでそのアイコンが何を示すのかわかりやすくデザインされているのが特徴的です。そんな企業秘密とも言えそうなGoogleのアイコンやロゴのデザインガイドラインをGoogleのグラフィックデザイナーであるロジャー・オドン氏がBehanceで公開しています。 Google Visual Assets Guidelines - Part 1 on Behance http://www.behance.net/gallery/Google-Visual-Assets-Guidelines-Part-1/9028077 Google Visual Assets Guidelines - Part 2 on Behance http://www.behance.net/gallery/Google-Visual-Assets-Guidel
jQuery：よく使用される機能をまとめて実装できるプラグイン - NxWorld
スムーススクロール・タブ切り替え・ロールオーバー・アコーディオンなどといった、サイト制作時によく使われる機能をまとめて実装することができるjQueryプラグインのまとめです。 予め使用する機能がはっきりわかっていれば、こういった便利なものを使用することでファイルの散乱も防げますし、管理もしやすくなりますね。 紹介するプラグインの中には必要な機能だけを選択してダウンロードできたりもします。 yuga.js web制作を優雅にするために作られたjQueryプラグインで、7種類の機能が実装されています。 ライセンスはMIT Licenseで、ライセンスに従う限り許可なく自由に使用できるそうです。 機能 ロールオーバー 現在のページをハイライト表示 外部リンクを別ウインドウで開く 画像をthickboxで表示（thickbox.jsを使用） スムーススクロール タブ機能 CSS3の擬似クラスをクラ
今年絶対おさえておきたいフラットデザインのまとめ | 株式会社LIG
こんにちは。ライターの内藤です。 恥ずかしながら、最近になって「フラットデザイン」を意識しはじめました。 装飾を最小限におさえることによって、特定のメッセージや製品、アイデアを直球勝負で伝えるデザイン。 フラットデザインは、もともとスマートフォンの小さな画面でシンプルに見せるものから派生したのだと思われますが、Windows8やGoogleの新デザインがきっかけとなって一躍注目を浴びるようになったようです。 もう知っている方も、まだ知らない方もいらっしゃると思いますので、目次のお好きなところから読んでください。 最初から全部読まなくても大丈夫です！ フラットデザインとは まずはどんなものか、百聞は一見にしかず、サンプルを見てみましょう。 フラットデザインの例 http://builtbybuffalo.com/ http://www.squarespace.com/templates/ ※
【Webデザイナー・コーダー向け】震えるほど便利なPSDスライスツール「Slicy」 - Flash Black
2012/10/13 23:33 一部修正しました。 PSDのスライスってめんどくさい デザイナーからあがってくるPSDをスライスツールで“ピクセルを気にしながら”切り出して〜という作業がとっても面倒！と思う人は多いはず。 そんな人々にお勧めな最強のツールをみつけてしまいました。 Slicyマジ最強 シャレ乙なHTMLエディタEspressoで知られるMacRabbitからリリースされているSlicy。 このサイトの説明だけでは良さが解りづらいのがモッタイナイ！ ものすごく簡単に素材の切り出しが可能です。 そして手順もすごく簡単！ 使い方 書き出したい素材をPhotoshopのグループ機能（Command + G）を使って纏める グループ名を書き出したいファイル名と拡張子（.png） に PSDを保存して、SlicyにD&D Slicy Sample from masabe on Vime
» スマートフォンサイトのユーザビリティを下げるアンチパターン | Webnoborder
モバイルデザインパターン― ユーザーインタフェースのためのパターン集を読んで、スマートフォンサイトのアンチパターンも作りたいと思ったのがキッカケで作ってみました。 独断と偏見で評価しています。 反応エリアを探させるアコーディオン 「お金からモバイルデザインパターン― ユーザーインタフェースのためのパターン集を読んで、スマートフォンサイトのアンチパターンも作りたいと思ったのがキッカケで作ってみました。 独断と偏見で評価しています。 反応エリアを探させるアコーディオン 「お金から探す」周辺のリストがアコーディオンになっていますが、テキストの部分をタップしても何も動作しません。 プラスアイコンの部分をタップしないと反応しないのです。 このようにタップ領域がユーザの意識と違う場所に設定されているのは、ユーザビリティに問題があるといえるので改善が必要でしょう。 参考サイト スマートフォンサイトにお
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
[デザイン]グラデーションを使う理由、不自然なグラデーションについて徹底的に分析した![[デザイン]グラデーションを使う理由、不自然なグラデーションについて徹底的に分析した](https://cdn-ak-scissors.b.st-hatena.com/image/square/232c41c1ad9ba1ab348c9a84db4d1d95780fb78b/height=288;version=1;width=512/http%3A%2F%2Fwebcre8.jp%2Fwordpress%2Fwp-content%2Fuploads%2F2013%2F06%2Fdesign-gradation-color-01-150x150.png)
新着記事
http://yuma-z.com/blog/2013/04/ninkiblog_ad/