【デザインまとめ】綺麗なデザインの管理画面 40種類
今日は管理画面のデザインを、まとめてみました。いつもより多めな40種類です。トレンドを反映してか、フラットデザインが多いですね。 通常の静的なサイトのデザインとは異なり、投稿がある場合無い場合とたくさんのパターンを考えながら制作しなければならないので、デザイン力が問われます。これらを日本語に置き換えるとまた違って見えたりするのですが、ひとまず、ご参考になればと思います。 ▼ The Kamarel デモサイト ▼ Apricot Bootstrap デモサイト ▼ The Vira デモサイト ▼ Cameo デモサイト ▼ DefOne デモサイト ▼ Pixit デモサイト ▼ AdminEx デモサイト ▼ Odin デモサイト ▼ Minimal デモサイト ▼ Delighted Flat デモサイト ▼ Tisa Premium デモサイト ▼ Adminre デモサイト ▼
色彩理論の基礎に学ぶ、相性抜群な「色の組み合わせ」 | ライフハッカー・ジャパン
身につける服でも仕事のプレゼンテーションでも、何かの見た目を良くしたいのなら、色は大切な要素です。ですが、オレンジと青が完璧な組み合わせだなんて、誰もが直感的に知っているわけではありません。自分の直感を信じられないなら、色彩理論の基本を理解して、それをもとに正しい色を選んでみてはどうでしょうか。 色相環を知る 上の図は基本的な色相環で、色を選ぶ際の指針になるものです。学校で見たことがあるかもしれませんが、忘れている方のために、簡単におさらいしておきましょう。 赤、青、黄色の3色が原色です。赤と黄色を混ぜると橙になります。青と黄色を混ぜると緑になります。赤と青を混ぜると紫になります。そのため、橙、緑、紫は二次色と呼ばれています。赤紫や青紫などの三次色は、原色と二次色を混ぜたものです。 すべての色には明色（明度の高い色）と暗色（明度の低い色）があります。明色は元の色に白を混ぜてできる色、暗色は
Stronghold - ぼくらの本拠地
AWSWordpress April 5th 2016 Amazon EC2でWordPress – Amazon S3にメディア画像等の静的ファイルを設置する方法 AWSWordpress April 5th 2016 Amazon EC2でWordPress – パーマリンクがうまく動作しない場合 AWSWordpress April 5th 2016 Amazon EC2でWordPress – SSH接続からWordPressのインストールまで AWSWordpress April 4th 2016 AWS Amazon EC2上でWordPressを動作させる方法 – EC2のインスタンス作成からMySQLの設定まで AfterEffects May 25th 2015 After Effects 埋め込み動画/静止画から指定色を透過させ、背景透過のPNG画像（連番）で書き出す方
サービス終了のお知らせ - NAVER まとめ
サービス終了のお知らせ NAVERまとめは2020年9月30日をもちましてサービス終了いたしました。 約11年間、NAVERまとめをご利用・ご愛顧いただき誠にありがとうございました。
Webデザイナー（私）によるタイポグラフィーレイアウトの注意書き
私は DTP デザインが苦手です ...。でもときどきお客さんから、フライヤーとかポスター、名刺なんかの紙のデザインを頼まれます...。そこでもっと勉強しなくちゃいけないなーと感じていたのが、タイポグラフィーについてのこと。今回はタイポグラフィーとそのレイアウトについて学んだことをまとめてみました。 以前グラフィックデザインをしている先輩に、グリッドシステムや揃えるだけがデザインじゃないし、もっとタイポグラフィーやレイアウトのことを勉強しなさいと言われました …。私は普段、Webデザインしかしていないんですけど、ときどきフライヤーやポスターのデザインを、ついで仕事のような形で頼まれる事があります …。 でも、Webデザインしかしてこなかった私は、紙媒体 – DTP デザインが苦手です …。ちょうど 1年くらい前にも同じような記事、Webデザイナー（私）によるDTPデザイン注意書き：Webと
lockエラー | 月額200円からのレンタルサーバー JSN
まずは最近知って便利だと思ったCSSの小技をひとつ。 文章の最後に、「※（米印）」などで注釈を入れたいときに、CSSのみで行の開始位置を揃えるのにすごくシンプルなやり方がこれ。 .note { padding-left:1em; text-indent:-1em; } <p class=”note”>※米印を使う場合はこいつが便利。<br /> 改行してもこの通り。ちゃんと開始位置が揃ってる。</p> 「padding-left : 1em;」でまず１文字分右に動かして、「text-indent : -1em;」で最初の行だけ１文字分左に出す、ということらしいです。これ考えた人はえらいっすねぇ。 他には開始位置を揃えるいわゆる「ぶら下げ」をCSSでやる場合、<div>タグの入れ子を使ってもいいが、<dl><dt><dd>の定義型リストを使うのがおすすめ。Definition Listの略で
Webクリエイターボックス
WebクリエイターボックスのX: @webcreatorboxでは毎日Webに関する記事や美しいデザイン・写真などを紹介しています。その中で今週人気だったWeb関連の情報トップ10を紹介します。見逃してしまった人はこちらでチェック！まだフォローしてない人はお気軽にフォローしてみてくださいね！ 続きを読む オンラインスクールでWebデザインを教えているのですが、よく担当している生徒から良い案件や求人情報の見分け方を質問されます。経験が増えると「これなんとなく胡散臭いなー」というのが見えてくるのですが、最初のうちは難しいですよね。ブラック案件やブラック企業にあたらないように、チェックしたいポイントをまとめました。 続きを読む WebクリエイターボックスのX: @webcreatorboxでは毎日Webに関する記事や美しいデザイン・写真などを紹介しています。その中で今週人気だったWeb関連の情報
8種類の前注意的な要素 – イディア：情報デザインと情報アーキテクチャ
人間は視覚的な情報を得たとき、まず前注意的なレベル（無意識な状態）で認識し、その後、注意的なレベル（意識的な状態）で対象が何であるのかを認識すると考えられている。 デザインにおいてある要素を他の要素よりも目立たせるには、前注意的なレベルで認識できる8つの要素を単独で、または組み合わせて用いると効果的である。 色調 色を変えて目立たせる。 同系色同士よりも、補色となる組み合わせで用いるとより効果的である。 位置と整列 位置を変えて目立たせる。 人は複数の要素が並んでいると、その並び方に何らかのきまりを見出す。そのきまりに反した位置にあるものは他のものより注目しやすい。 明度 明るさを変えて目立たせる。 全体が暗く、注目させたい要素が明るい時は「ポジティブ（選択されている、凸である）」な印象に、逆に全体が明るく、注目させたい要素が暗いときは「ネガティブ（選択されていない、凹である）」な印象にな
ホワイトスペース使ったウェブデザインの考え方
ウェブサイトの要素をレイアウトをする際に非常に重要な ホワイトスペースの考え方について、すこしまとめてみました。 私が人にウェブデザインを教えるときは、まずここから始めます。 boxとboxとの空間の開け方、要素と要素の「間」は、音楽でいうところの「リズム」だと考えています。 リズムが整っていれば、他の要素が主張したことが上手に伝わります。 リズムが整っていなければ、けんかしあい、不協和音＝見づらい状況を作り出します。 自分なりのリズムを見つけていけば、それが個性・ジャンルになるのです。 どれが間違っている、というお話ではなく、どんな風に感じたかを大事にして読んでみてください。 とてもとてもシンプルな例を出してみます。 AとBを比較してみてください。 どちらのほうが読みやすいように感じますか？ どんなふうに感じましたか？ この例では、Bのほうに大きな余白を与えました。 ４隅すべて同じぐらい
サービス終了のお知らせ - NAVER まとめ
サービス終了のお知らせ NAVERまとめは2020年9月30日をもちましてサービス終了いたしました。 約11年間、NAVERまとめをご利用・ご愛顧いただき誠にありがとうございました。
1年目デザイナーに読ませたい配色の考え方を学べる記事
配色センス0でも大丈夫！？服、インテリア、デザイ... / Webサイト制作において、私なりの色選定の考え方... / 色と人の感覚とウェブデザインのはなし - バニデ...他...全10件
透過GIFのギザギザ
GIFで透過保存した時にでるギザギザ 知らないふりをして、GIFで透過保存してきましたが、実のところどうにもギザギザが気になります。何か良い方法はないのかしら？ いろいろと試してみたところ、条件付ですが、ひとつ方法が分かったので、次の順番で、お話は進みます。
スタイルシートをめぐる冒険: CSS実験室: clearfixの決定版を作る ―モダンブラウザ編―
floatに起因するレイアウトくずれの多くは、floatをしかるべき場所でクリアすることによって解決する。このことを発見して以来、もっぱら空ボックスにclearを指定するという方法（<div style="clear: both"></div>）を多用してきたが、HTMLにある種の不純物が混じることに居心地の悪さはずっと感じていた（「floatを繰り返すとレイアウトがくずれる」参照）。この気持ち悪さを解消してくれるのが、clearfixというテクニックだ。 基本的な発想は上記の空ボックスによるクリアと同じだが、それをHTMLには一切手を加えず、スタイルシートだけで実現しているところに大きな特徴がある。しかし、ひとくちにclearfixといっても様々なバリエーションがあり、その記述のしかたは微妙に異なる。 例えば、clearfixの提唱者ではないかと類推されるPosition Is Ever
写真が綺麗なサイト35 – creamu
Smashing Magazineで、写真が綺麗なサイトがまとまっています。 ざっといくつかご紹介。 » Jonathan Glynn Smith クールなスプラッシュスクリーンと美しくミニマルなデザイン » Rankin UKのフォトグラファーによる大きい写真とカラフルなデザイン » Lara Jade 美しくデザインされたFlashベースのサイト » Burn Magazine 新しいコンテンツを保つためブログライクなデザインにしたBurn Magazine » Chase Jarvis フォトグラファーの中で有名なブログ。シンプルなメニューとアニメーションで大胆に切り替わる写真。↑のキャプチャはこちら その他のリストは以下からどうぞ。 » 35 Beautiful Photography Websites 休日出勤が終わって外苑前で作業中ーっと。うーんまだまだだ。
私がIllustratorで絵を描けるようになるのに有効だった練習方法
Illustratorの使い方がさっぱり分からず放置していた私が、どうしても使えるようになりたくて、現在まぁ描きたいものを描けるぐらいにはなったかな…というところまで至った経緯をまとめてみました。同じように最初の一歩でつまづいてしまった方のお役に立てたら幸いです。 目次 挫折→放置→やっぱり使えるようになりたい！ まずは思い通りの“線”を描くのを目的にする とりあえずコレだけ覚えておけばなんとかなる 難しいことは考えず、まずは曲線から ハンドルの扱い方 オブジェクトの扱い方 簡単なイラストを描いてみる アウトライン化して、強弱をつける Shiftを押しながら出来ることいろいろ イラレで描いたイラスト例 注記：この記事は以前イラレについてまとめたものに加筆しているので、スクリーンショットのイラレのバージョンが新旧混在しています。ご了承ください。 挫折→放置→やっぱり使えるようになりたい！ わ
Illustratorで光り輝くWeb 2.0風ボタンを作る方法 / ウェブデザインライブラリー
Home ＞ グラフィック講座 ＞ Illustratorで光り輝くWeb 2.0風ボタンを作る方法 Illustratorで光り輝くWeb 2.0風ボタンを作る方法 投稿日：2008年8月8日 レベル：初心者 ソフトウェア： このチュートリアルでは、イラストレーターで光り輝くWeb 2.0風ボタンを作ってみたいと思います。 Step1 ： ボタンを作る Step2 ： 完成 Step3 ： サンプル 簡単にできますよ。 はじめに、（Shiftキーを使って）円を描いて次のように円形のグラデーションで色を塗ります。 円をコピーして最初に描いた円の上端に合わせてペーストし、少し小さくします。小さい円のグラデーションを180度回転させます。これが「光り輝く」効果を作ります。 別の円を作って先ほど作った円よりも小さくします。シンプルな円形のグラデーションで色を塗ります。 4つ目の（最後の
ホームページ制作の0円のweb素材屋さん｜ホームページ制作ツール
ホームページ制作に役立つwebデザインを無料配布している0円の無料素材屋さんは、プロのwebデザイナーによって作られています！ホームページ制作だけではなくブログ制作にも役立ちます。アイコン、ボタン、背景、バナーなど、web素材が無料！ネットショップから企業サイトまで、ビジネス向けの商用にも使えます。素材利用の使用報告など、面倒なことは必要なっし！皆さんが楽しいwebライフをすごせますように♪ ← これも無料素材のひと～つ！無料だよ！ あ、この素材いいなぁ♪と思ってくれたら、どんどんリンクしてくれると嬉しいです！！下記のバナーをどうぞご活用ください！また学校教育関連の資料や素材としても、どうぞご利用ください、お役立ちできると嬉しいです。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
新着記事
新着記事
最近リリースされた高品質なフリーのデザインフォント -2012年1月