新人ウェブデザイナーに送る。ウェブデザインブックマークサイト決定版！
おはようございます。CD藤本です。 厳しい冬も終わりを告げ、大好きな春がやって来ました。 桜、誕生祭、キャンプ初め、サイクリング開始。と良いことづくしの春。 当社でも11名の新入社員を迎え入れました。 個性あふれるフレッシュな11名の新人たち。ようこそSOLGへ！！ さて今回は、デザイナーなら誰でも知っていると思いますが、新人ウェブデザイナーのために、ウェブデザインのブックマークサイト・ギャラリーサイトを紹介します。 僕が知っているだけでもこの手のサイトは30サイト以上あります。老舗から新参者、洋物中心のところから和物のみにこだわったところ。縦長にこだわったところからスマホのみに絞ったところ、パーツのみに絞ったところもありますね。 僕が何年も使い続けた結果、ここが至極のブックマークサイト（以下ブクマサイト）だ！という5サイトを紹介します。 （今回はパソコンサイトを扱うブクマサイトに限らせて
『３分で分かるフラットデザイン』
1 pixel｜サイバーエージェント公式クリエイターズブログ サイバーエージェントのクリエイターの取り組みを紹介するオフィシャルブログです。最新技術への挑戦やサービス誕生の裏話、勉強会やイベントのレポートなどCAクリエイターの情報が満載です。 はじめまして。 2013年度新卒入社、DETOXでデザイナーをしているSonokoと申します。 今回はDETOXで用いたフラットデザインについてお話したいと思います。 DETOXとは DETOXとは言いたいことも言えないこんな世の中で、ネガティブな発言や失敗や愚痴を気心の知れた友人同士で共有できるニュータイプSNSです。 「SNS疲れ」などで溜まった現代のココロの闇を「ポイズン」として吐き出せます:) DETOXでは、iOS 7の普及に伴いフラットデザインを搭載しました。 トレンドの「フラットデザイン」ってなに？まずはどんなものか、百聞は一見にしかず
UXデザインというものについて - yzgwyskw
UXという言葉は非常に誤解されているように感じます。これはUX〇〇を単にUXと言ってしまう軽率な省略によって引き起こされているのではないかと思っています。この省略のために、UXというのは結局なんなのか？という疑問を引き起こしているように感じています。この文章は、そういう疑問を持っていた一年前くらいに自分に対して説明を行うような気持ちで書きました。ただし、私は仕事としてUXを扱っておらず、自分の理解を整理するためにここで文章にしていることを留意ください。 UXとは そもそも、UXというのは"ユーザが製品に触れている際に経験する知覚や感情"であり"現実世界に起こっている事象"です。ここで重要なのは、UXは単に事象でありその他の意味は含まれていないということです。直感的といった曖昧な言葉がUXの形容詞として用いられていることが多いため、使いやすくなければUXでないような印象があるかもしれませんが
お問い合せフォームをコーディングするための9つのTips | 株式会社LIG
こんにちは。 LIGフィリピン支社代表のせいとです。 お問い合わせフォームといえば、どんなサイトにも大体備わっているものですよね。 どのフォームも見た目は大体同じのため、構築自体は簡単かと思います。 ただし、システムが絡んだり、ユーザーに操作してもらったりと、けっこう重要なページであったりもします。 そこで今回は、ユーザーにとってより快適なフォームを実現するためにオススメしたいクールな技をお伝えしたいと思います。 また、今回の記事を書くにあたり、デモページを作成しました。 こちらのソースも見ながら読んでいただくと、よりわかりやすいかと思います。 ユーザーフレンドリーで構築もしやすいクールなお問い合せフォームをコーディングする9つのTips 1. ボタン系の要素は全て<button type=”submit”></button>を使う 「送信する」「入力画面に戻る」などの要素を作る際、タグは
経歴や会社の沿革ページに！簡単なCSSで実装するタイムライン
2014年3月28日 CSS, Webサイト制作 ちょうど今作っているサイトで、経歴をタイムラインで表現するページがあったのでコードを紹介。コード自体はとってもシンプルなので、カスタマイズ次第でどんなデザインのサイトにもあわせられると思います。文章にするとゴチャゴチャしがちな経歴・沿革をスッキリと表示しましょう！ ↑私が10年以上利用している会計ソフト！ サンプル Chrome, Firefox, Safari, IE9・10で動作確認。 See the Pen Timeline by Mana (@manabox) on CodePen. モバイルファーストってことで、640px未満の幅のデバイスには年月・見出し・詳細文章を順に表示します。 モバイル版はこんな感じ。サンプルページの画面の幅を調整して比較してください。 HTML timeline というクラスのついたリストの中の li タ
テーマ作成の前に知りたいTumblrカスタマイズの基本 (1/3)
Webデザイナーへ向けて、Tumblrの魅力とテーマの制作方法を解説する本連載。前回は、Tumblrの簡単な紹介と、利用するメリットを説明しました。今回は既存のテーマを簡単にカスタマイズする方法について解説します。 テーマを変更してみよう Tumblrは、好みのテーマに切り替えることで、サイトのデザインを大きく変えられます。「テーマを作る作業」が、Tumblrを使ったWebサイト制作であると言ってよいでしょう。 テーマには、Tumblrが公式に配布しているものと、企業や個人がWeb上で配布している非公式のものがあり、有料・無料を問わずたくさんのテーマが公開されています。公式のテーマの場合は、Tumblrのカスタマイズ画面の「テーマを見る」から「使用する」をクリックすると、自分のブログにすぐに適用できます。 また、「さらにテーマを検索」をクリックすると、Tumblrのテーマ一覧ページが開き、
おかんでもわかるUXデザイン Version 0.1 - ネコメシCEOブログ
3/24、TAM Coworkingをお借りして、「おかんでもわかるUXデザイン」というセミナーを自分で主催して実施しました。これ、ゆくゆくはマジでおかんでもわかるようにしたいんだけども（ようは、専門家じゃない人向けということですが）、まずはそのたたき台という感じで（だからVersion 0.1）、単にUXデザインって何よっていうのを単純化しただけの内容になっていて、完全におかんを突き放しているという、タイトルに偽りアリのものとなっております。 Version 0.1とはいえ、まー、UXデザインやってみたいけどやったこと無い人とか、何したらいいのかわからん人とかにとっては、ひとつの道しるべになるかもしれないので、スライドを公開する次第なのですが、本気で本職でUXデザインしてる人とか、アーキテクト的な人とか、そゆ人たちが見たら憤慨しそうなくらいに単純化しております。ツッコミどころ満載かと思い
レスポンシブWebデザインでハマりがちな%指定 │ Design Spice
レスポンシブWebデザインでは要素を可変にするために数値を%で指定することが多いですが、%指定の仕様を理解してないとハマることがあります。自分もそのような経験があったので備忘録としてまとめました。 要素の幅と高さの%指定 レスポンシブWebデザインのように、ある要素の幅を一定の比率を保ったまま可変するようにするには、通常、値を%で指定します。この時の値は、 求める要素の幅÷親要素のコンテンツ幅×100% の式で求められます。 例えば求める要素の幅が20px、親要素のコンテンツ幅が200pxの場合は、10%となります。 また、ここで言うコンテンツ幅とはmargin、padding、borderを含まない幅です。 同様に高さを%で指定する場合は、 求める要素の高さ÷親要素のコンテンツの高さ×100% となります。 marginとpaddingの%指定 左右のmargin、paddingを%で指
Webデザイナーに愛を込めて。ディレクターが意識すべき７つのポイント | LPO研究所
LPO研究所所長の鎌田です。 先日、弊社デザイナーが「新人Webデザイナーにありがちな５つのコミュニケーショントラブルとその解消法」という記事を書きました。 この記事は公開2日で1万人以上もの方にお読みいただきまして、本当にありがたい限りなのですが、そのなかで 「指示を出すディレクターにも問題があるのでは？」 というご意見を同時に多数いただきました。 皆さんの仰るとおりでして、「売れるWebデザイン」というのは、デザイナーとディレクターの真剣勝負によってのみ生まれます。どちらか一方が依存している状態、考えていない状態では、ターゲットの心を掴むデザインを作ることはできません。 では、「売れるデザイン」をWebデザイナーに作ってもらうために、ディレクターは具体的にどう動けば良いのでしょうか？ 実はデザインディレクションにも、誰でもカンタンにマネできる「ちょっとしたコツ」があります。 今回は「デ
バナーレイアウト20選
効果が出るバナーのレイアウトには一定のパターンがあります。 今回は成果を出せるバナーのテンプレートを20種、広告代理店でバナーを作成している私が作ってみました。 バナーのレイアウトでお悩みの方も、そうでない方も、イメージを膨らませたり、いざという時のためにストックしたり、自由に活用して頂ければと思います。 【eBook】コンバージョンする効果の高いバナーの作成方法 悩んだらまずは最強のベーシック型コピー・訴求文・写真などをバランス良く盛り込み、情報量が多いレイアウト。バナーの時点で多くの情報を伝えられるため、飛び先との整合性が高いことが特徴です。しかし珍しさやインパクトにかけるので、似たようなバナーにまぎれると埋もれてしまう恐れがあります。 ベーシック型バナーレイアウトベーシック型バナーサンプル ベーシックに負けない３つの王道レイアウト同じバナーを出し続けているとユーザはマンネリを感じてし
レスポンシブデザインを制作するなら頭に入れておくべき基本事項7つ | 株式会社LIG
どうも〜こんにちはぁ！ 最近レスポンシブなサイトを作ることが多いライターの、のび太です。 モバイル、タブレットユーザーが最近どんどん増えてきているので、Web制作者にとってレスポンシブなサイトが作れるってことが必須になるんじゃないかなぁ〜って感じますね。 レスポンシブデザインを制作するときに意識しなきゃいけないことはいろいろありますが、今回は「これはぜったいに知っておきたいよね！」って感じた基本的なことを7つご紹介させていただきたいと思います。 レスポンシブデザインを制作するときに意識しておきたい基本項目7つ 1. 画像の代わりになるべくCSSで表現すべし レスポンシブデザインで画像を使うと、モバイル端末ではPCに比べて回線速度が遅いため、読み込み時間が余計にかかってしまいます。 そのため、画像ではなくCSSで表現可能なものはどんどん代替していったほうがいいと思います。 立体ボタンや矢印だ
『難しくないデザイン効率化のすすめ』
1 pixel｜サイバーエージェント公式クリエイターズブログ サイバーエージェントのクリエイターの取り組みを紹介するオフィシャルブログです。最新技術への挑戦やサービス誕生の裏話、勉強会やイベントのレポートなどCAクリエイターの情報が満載です。 はじめまして。アメーバゲーム部門でデザイナーをしております吉田直由と申します。 リリース直後からの1年2ヶ月の間、ガールフレンド（仮）でUIデザインの運用を担当しておりました。 運用のフェーズになると大きく問題になってくるのが「業務の効率化」ではないかと思います。便利ツールの導入や、難しい技術の取得などもありますが、、、使い慣れない技術は逆に効率を下げる結果になってしまうのでは？ と、なかなか一筋縄ではいかない問題です。 ガールフレンド（仮）デザインチームの場合、1年目～3年目の若いメンバーが多く、さらにメンバーの数も10人という大所帯でした。 どう
カードUIとコンテンツのパッケージング
小さなパッケージとしてのカード 前回の記事で、メッセージのやりとりという文脈にカード UI が組合わさることで、新たな利用者体験を提供できるのではないかという話をしました。コンテンツを『ページ』としてではなく、『小さなパッケージ』にして利用者に配信することが主流になりつつある現在。これは、Web 上の情報のあり方を再考せざるを得ないと同時に、利用者にとって理解しやすい（ページに代わる）メタファが必要とされているのだと思います。小さなパッケージの表現方法としてカード UI は、無視できないデザインパターンのひとつです。 カード UI の可能性を最初に感じたのは、2010 年に登場したPinterest。たくさんの画像を全面に出しつつ、概要や操作を統一感を持たせてコンパクトに表現しています。Pinterest がブレークした頃、無限スクロールや、隙間なく敷き詰めたグリッド表現が注目されました。
サービス終了のお知らせ - NAVER まとめ
サービス終了のお知らせ NAVERまとめは2020年9月30日をもちましてサービス終了いたしました。 約11年間、NAVERまとめをご利用・ご愛顧いただき誠にありがとうございました。
初心者ブロガーが覚えておきたい読まれるブログデザインの大原則 - Naifix
WordPress は、テーマの変更やカスタマイズで自分好みのデザインにできます。記事を書く以外の楽しみ方も増えますし、記事ネタが思い浮かばないとき・モチベーションが下がっているときの気分転換にもなりますよね。 しかし、読者を無視したデザインになっていないでしょうか。どんなデザインにするのも運営者の自由ですが、最終目的は「読まれるブログ」を作ることだと思います。そのため、最低限のルールは守らなければいけません。 本記事では、ブログ初心者が覚えておくべきデザインの基本とルールを解説していきます。 デザインは読者のためにある 大前提として覚えておくべき基本は、「デザインは読者のためにある」ということ。 自分だけが見る自分のためだけに作ったブログなら、100 ％ 自分に合わせてもよいと思います。でも、あなたが読みやすい・使いやすいと感じているから周りもそうだ、とはかぎらないのです。 客観的な視点
『色を色で見ないで』
1 pixel｜サイバーエージェント公式クリエイターズブログ サイバーエージェントのクリエイターの取り組みを紹介するオフィシャルブログです。最新技術への挑戦やサービス誕生の裏話、勉強会やイベントのレポートなどCAクリエイターの情報が満載です。 はじめまして。 2013年度新卒入社、AmebaのSimplogでWEBデザイナーをしているリュウタロウと申します。 以前新卒デザイナー同士の勉強会がありまして、そこでの私の発表内容がすごく好評でした。 以降より多くの人に向けて発信したいと考え、この場をお借りして記事を執筆させて頂く事になりました。 これから綴るのは、デザインの細かいテクニックやハウツーではありません。 様々なジャンルのクリエイティブに通じる、基本的なモノの見方、考え方の話です。 「ワタシ、デザインワカラナイワ」 というビジネスパーソンも、普段やっている仕事や趣味とリンクさせながら理
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
dfltweb1.onamae.com – このドメインはお名前.comで取得されています。
dfltweb1.onamae.com – このドメインはお名前.comで取得されています。
ひとりでWeb制作できた！Webデザインの勉強にもなる独学「スライド」総まとめ
Flat UI - Free Bootstrap Framework and Theme