&IDEA編集部(SBクリエイティブ) @and_IDEA 《新しい知識が、明日を拓く。》SBクリエイティブ株式会社&IDEA(アンドアイデア)編集部です。ITやデザインにまつわる技術書を出版しています。 ※書籍に関するご質問などは下記サイトのメールフォームよりお寄せくださいますよう、よろしくお願いいたします。 https://t.co/fQnLz30xff
&IDEA編集部(SBクリエイティブ) @and_IDEA 《新しい知識が、明日を拓く。》SBクリエイティブ株式会社&IDEA(アンドアイデア)編集部です。ITやデザインにまつわる技術書を出版しています。 ※書籍に関するご質問などは下記サイトのメールフォームよりお寄せくださいますよう、よろしくお願いいたします。 https://t.co/fQnLz30xff
レスポンシブWebデザインの実装に欠かせないメディアクエリを使わずに、CSS GridとFlexboxでレスポンシブなレイアウトを実装する方法を紹介します。 レスポンシブなレイアウトにはメディアクエリが欠かせないわけですが、CSS GridやFlexboxを使えばメディアクエリなしでもレスポンシブなレイアウトが可能です。メディアクエリが全くいらなくなるということはないと思いますが、CSS GridとFlexboxを使えば、メディアクエリの記述を減らす方法があります。しかもコンテンツの幅に合わせて中身のレイアウトを調整するようなエレメント・クエリ的な使い方も、ある程度なら実現できます。 応用すれば今後のレスポンシブなレイアウトのCSSの組み方を変えてしまうような方法です。 ※デモはFirefox 58.0.2、Chrome 64.0.3282.140、Safari 11.0.3でテストしてい
配色がうまくいかない場合の多くはたくさんの色をついつい使ってしまった結果招いていることが多い。まずは2色で配色をしてその上で少しずつ色の調整をすることによって、まとまりのあるデザインが作りやすくなる。 一般的に言われている配色は、ベースカラー7割、メインカラー2割、アクセントカラー1割。一番表現したいことをアクセントカラーにすることで表現したいことが何かはっきりわかりやすくなる。 なんとなく落ち着いていて物足りない場合、色相環で反対の色をアクセントカラーに持ってくるとインパクトがでる。この色相環の反対の色を反対色や補色といったりもする。 逆にガチャガチャして色がうるさい場合は、色相環の隣り合った色数色を選び配色することで全体的にまとまった印象になる。この色相環の近くにいる色のことを近似色と呼ぶ。 配色を決める場合、いくつかの軸があるが、何を表現しなければいけないかというテーマによって配色を
blog.minimal-green.com 前回の記事ではテーマ制作者の立場からモラルと責任について書きました。ここではより一般的な視野で、Webデザインの著作権周りについて考えてみます。 デザインの著作権侵害訴訟の判例一般的にwebデザインをパット見パクった程度では著作権性で争うことは難しいそうです。 www.ituki-yu2.net 言及されたので拝読しコメントさせていただきました。その中で Webデザインで著作権侵害が認められるか否かですが、僕の見解としてはグレーだと思います。 こういったケースで裁判になった場合、過去の判例で大体決まるんですが、webデザインの著作権侵害の判例はありません。 類似のデザインの著作権侵害の判例で、とある商品の販促ツールデザインについての著作権侵害訴訟の中で、そのデザインについて制作者側の著作物性が否定された事例があります。 として以下の判例を教えて
はてなブログでONIHITODEというテーマが公開されて、ちょっとした議論を巻き起こしてテーマ自体が非公開になるという事案が発生しました。 自分もすべては把握していないですが、ざっくりとした流れとしては ①ONIHITODEというテーマが公開される ②「オシャレだ!」「かっこいい!」と話題になる ③Wordpressの有料テーマSANGOのパクリでは?という指摘がなされる ④炎上→非公開(削除?) 大体こんな感じかと思います。 skyfish25.hatenablog.com 自分は当事者ではないのですが、別ブログでSANGOを実際に使用していること、はてなブログでブログを書いていること、デザインに関する仕事をしていること、本件に関して宇宙魚(id:skyfish25)さんの記事に自分のツイートが引用されたことで反響があったことなどを総合して自分の考えをまとめてみようと思いました。 テーマ
ログインをもっと快適に オープンソースのログインフォーム10選「10 Open Source Login Pages Built With HTML5 & CSS」 会員登録ページや管理画面へのアクセスに使用するログインページ。シンプルなものが一般的ですが、こだわりを見せることでサイトのクオリティは高まります。今回はそんな時に参考にしたい、オープンソースのログインフォーム10選「10 Open Source Login Pages Built With HTML5 & CSS」を紹介したいと思います。 Sign in 10種類の、それぞれ個性をもったログインフォームがピックアップされています。 詳しくは以下 Login Form ログインフィールドにドロップシャドウがかかった、フォームやボタンのエッジが丸い、柔らかい印象のフォーム。フラットテイストなトレンド感を感じさせるデザインですね。
Webサイトやスマホアプリをデザインする際に、カラー・タイポグラフィ・レイアウトなどはどのようにすればうまくいくのか、ユーザーインターフェイスのデザインが一手間加えるだけでよくなるデザインの知識とテクニックを紹介します。 10 cheat codes for designing User Interfaces 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 1. テキストは重要、より大きく! 2. 複数のブラックを作成しない 3. カラーを理解するためには数学が大切 4. 空白スペースを活用してグループ分け 5. カラーを使用して行を区切る 6. ドロップシャドウの代わりに乗算を使う 7. 一行の長さ 8. 新しいデザインに執着しない 9. ブランドカラーをアクセントとして使用する 10. リストにおけるビュレットのデザイン 1
2017年10月11日 CSS, Webデザイン Webデザイン・制作を教えている時に、担当していた生徒さんからこんな悲痛なメッセージをいただきました。「Webサイトのデザインを出してみたものの、本気を出して作ってくださいと言われてしまいました…」。デザインを見てみると、とても美しく整ったものだったのですが、「テンプレートとしてありがち」なレイアウトに見えました。この辺を指摘されたのかな、と。自分でコーディングをすることを考えると、どうしても自分の力で実現できそうなデザインにしてしまうんですね。私も駆け出しの頃はよくありました。そこで今回はちょっとした工夫で少し差がつくCSSの小技をいくつか紹介します。簡単にできるとわかれば、デザインに反映できそうですね! ↑私が10年以上利用している会計ソフト! 1. 要素を斜めに配置 通常CSSでレイアウトを組んでいくと、垂直平行のボックスが並んでいく
非デザイナーエンジニア(Rubyist)の私が、一人でこんなWebアプリを作ってみました。 まだβ版ですが、Pocketやfeedlyの未読コンテンツの中から、 重要度が高いものだけをリマインドしてくれるサービス「Reminderr」です。 Reminderr:http://www.reminderr.me/ 要するに、私自身のPocketとかRSSがカオスになっているので、 その中で重要なものだけ教えてほしかったので、 自分で作っちゃえ!って思って作りました。 そのときに使った便利ツールたちをまとめておいたら便利そうだったので、 今回使ったもの+αを全てまとめてみました。 紹介するツールたちを駆使すれば、 非デザイナー&デザインセンス0の私が、 1週間程度でこれくらいのアプリをリリースできるので、 他のエンジニアにも便利なツールがいっぱいあると思います。 Bootstrap系 Boots
友達がブログを始めるそうで、日本語の無料フォントが知りたい!画像にタイトル文字漢字をいれたい、漢字も使えるフリーフォントを教えて!と連絡がありまして。 デフォルトで入っているもので、いいじゃないか!と言ったのですけどね。 勢いにまかせてケチ呼ばわりするんですよ。 タチが悪いですよね。ったく。 それで、いくつか教えたんですけど、もっと、はよ!と言い出す始末。 あ!それならこれ、記事にメモとして残そうと考えたわけです。 ついでに、画像にタイトルを入れるのって、どんなデザインがいい?というので普通に画像の上からガシガシ書いたらいいじゃん。というと、もったいぶりやがって!というんですよ。ちょ、オマエ何様だよ! こんなんどうでしょうね。 フォントはフリーフォント、タイプラボ「あられ」です。 前置きの尺が長くなりましたが、もう少し話していいですか? フォントといえば、七種泰史さん。「きりぎりす」は見れ
他に何がほしいってんだ、クソ野郎 お前はウェブサイトを作ってその糞サイトを最高だと思ってるんだろ? お前は13MBに及ぶパララックスエフェクト付きのクソ重いページがアホらしいグッドデザイン賞をとるとでも思ってるんだろ? お前は20kgあるjQueryファイルと83個のpolyfilがIE7をまともに動作させると思ってるんだろ? どアホ、お前は間違っている。俺様が俺の考える最強のウェブページを教えてやる。 クソ軽量でクソ速いページ 全てのデバイス幅に対応できる どんなうんこブラウザでも見た目が一緒 お前のサイトに訪れるどんな糞野郎でもアクセス可能 読みやすく伝えたいことが明確(もっともお前が5MBサイズのシャレオツなコーヒー写真ではなくて伝えたいことがあればの話だがな) よく聞け、糞野郎ども お前らはハッキリ言ってオーバー・デザインだ。この史上最強のウェブサイトを見てみやがれ。俺がごみコンテ
2016 - 11 - 11 はてなブログ非公式テーマ『百科事典的な何か』を公開しました(Githubに) ブログ運営 ブログ運営-カスタマイズ コピペで簡単!はてなブログのシェアボタンをカスタマイズ コピペで簡単!CSSではてなブログの見出しをカスタマイズ! はてなブログをカスタマイズしてる人向け。jQueryの読み込みを速くするためにコードを変えてみた YouTubeを埋め込んでも重くならないようにする方法がめっちゃ良かった はてなブログの超便利なデザインテーマ「Brooklyn」を作りました ダウンロードしておきたい最新おすすめ洋楽【2016年版】 オススメの人気洋楽記事一覧 【洋楽】UKロック入門!おすすめバンド20選 人気洋楽のYouTube再生回数ランキングTOP30 90年代洋楽HIPHOPの名曲をあげていく 人気の洋楽を紹介します - 女性アーティスト編 - 90年代洋楽お
今回はひたすら配色パターンを紹介していく。探しやすいように色ごとに分け、使いやすいように解説とWebコードも合わせて紹介する。プレゼン資料、Webデザインなどで目的に合った配色をそのままコピペして使って頂ければと思う。 ▼ 目次 カラフルな配色パターン 橙系の配色パターン 青系の配色パターン 緑系の配色パターン 黄色系の配色パターン 赤系の配色パターン 高級感を表現する配色 わび・さびを表現する和風配色 シンプルに格好良いグレーの配色 カラフルな配色パターン 1. 淡い「カラフル」 ■ #FF7D7D ■ #FFD580 ■ #B3E2B4 ■ #ABE7FF ■ #B8B2EA ■ #DBDBDB 淡いカラフルな配色は、白の背景に合わせると「透明感」を出すのに効果的。カラフル系の配色は扱いづらいので、上のコードをそのままコピペして使って頂くのが良いかと思う。 2. 力強い「カラフル」 ■
デザイナーでなくとも、デザインについてのいくつかのルールを知っておくと、日々の生活で何かと役に立つ。今回は、誰もが知っておくべきデザインの基本原則・テクニックを紹介する。 1.デザインの基本原則を覚えよう 1-1.「1/3ルール」を覚えよう レイアウトや写真の構成を考えるときには、黄金比*1よりも「1/3の法則」が便利だ。上の図のように、全体を9等分割したとき、各線の交点(図の丸点)に主張したいモノを配置するようにする。これだけで、不思議とスッキリとしたデザインになる。技の1つとして覚えておこう。 1-2.端をそろえて線をつくろう 写真や文などの「要素の端」をきちんとそろえると、きれいに整理されて見える。これはデザインにおいてとくに重要な基本ルールだ。全てをそろえる必要はないが、縦にいくつか要素を並べる場合は常に意識しよう。 1-3.視線の流れを意識したデザインにしよう 情報がたくさん詰め
イラストサイトのpixivがリニューアルするらしいとのことで新サイトのテストの協力願いが送られてきていたので1ユーザーとしての感想を書いておきます 下記のようなメッセージが届きました 長くてちゃんと読む気が起きません>< 【pixiv】サイトリニューアル予定とテストへのご協力願い pixiv事務局です。 いつもpixivをご利用いただき誠にありがとうございます。 pixivでは2016年春に向けて、リニューアルの実施を計画しております。 今回のリニューアルでは、デザインを一新する他、サムネイルサイズの拡大やリコメンド機能の強化を行うことで、皆様の作品がより閲覧され、評価される場所となることを目指しております。 そこで、普段よりpixivをご利用いただいている皆様に、開発中のPCブラウザ向けページを触っていただき、ご意見・ご感想をいただきたいと考えております。 pixivをより良いサービスに
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く