レスポンシブ・ウェブデザイン基礎実録 WordPress Twenty Sixteen のカスタマイズ | WordBench東京 2月勉強会 「みんなのテーマ開発」〜自分の好きな作り方...Akira Tachibana
10KB以内、レスポンシブWebデザインである事が条件の軽量Webサービスのコンテスト・10K Apartの中で面白かったもの10個
面白そうなコンテストが開催されているよう だったのでメモがてらご紹介。10KB以下で、 しかもスマートフォンやiPadなど様々なデバ イスで閲覧してもレイアウトを崩さないレス ポンシブWebデザインであることが条件の Webアプリコンテスト・10K Apartからいくつ か面白かったものを選んでみました。 モバイルでも使える軽量Webサービスのコンテスト、みたいな感じですかね。なかなか面白いものが揃っていました。開発者さんは参考にされては如何でしょう。 条件は画像やcss、jsなど全て合わせて10KB（圧縮可）以内に収めること、様々なデバイスでもレイアウトを崩さないレスポンシブ設計であることなどがあげられています。コンテンツは結構APIありきになってます。当たり前かもですがｗ 現在120以上のも作品がエントリーされていますが、この中で個人的に気に入ったものを10個ほどご紹介します。順不同。
Web制作者は知っておきたいwebサイトのレイアウト7選 │ Design Spice
レスポンシブwebデザインからグリッドデザインまでよく使われているwebデザインのレイアウト用語をまとめました。 レスポンシブwebデザイン エラスティックレイアウト リキッドレイアウト フレキシブルレイアウト 固定幅レイアウト グリッドレイアウト 可変グリッドレイアウト レスポンシブwebデザイン(Responsive Web Design) PCやスマートフォン、タブレット事に複数のデザインを制作するのではなく、 ディスプレイの幅に合わせてデザインを最適化する方法。 CSS3のMedia Queriesを利用してディスプレイサイズに応じてデザインを変更します。 メリット 一つのソースで複数デバイスに対応できるのでメンテナンスが容易です。 また今後デバイスの種類が増えてもそれに対応できます。 それぞれのデバイスに合わせた形で調整できるのでユーザーエクスペリエンスも高くなります。 デメリッ
インスピレーションの宝庫！Web制作会社のポートフォリオWebサイト35
2017年7月14日 Webデザイン, インスピレーション 先週末、ぼけーっと世界各国のWeb制作会社のWebサイトをひたすら眺めていました。デザイン・Web制作会社のWebサイトって細かいところまで気をきかせていたり、クスッと笑ってしまうような仕掛けがあったりして、見ていて飽きないんですよね。さらにそのサイトだけでなく、彼らの作る作品も素敵なものが揃っているという点もおもしろいです。そんなWeb制作会社のWebサイトと、その見どころを紹介します！ ↑私が10年以上利用している会計ソフト！ Web制作会社のサイトの特徴 Web制作会社のポートフォリオサイトを眺めていて、いくつか発見があったのでまとめてみます。 制作実績 多くの会社がjQueryなどを使って動きをつけて作品を紹介していました。また、以下の情報を載せているサイトが多かったです。 スクリーンショット クライアント名 制作したサイ
ウェブデザインをワンランクアップさせるデザインテクニック『奥行き』の使い方
あなたのウェブデザインをワンランクアップさせる『奥行き』を使いこなすための5つのデザインテクニックを紹介します。 Creating Depth in Web Design: 5 Design Tricks [ad#ad-2] 下記は各ポイントを意訳したものです。 はじめに リアリスティックなインターフェイス ラッピングとリボン 遠近法 オーバーラッピング シャドウ おわりに はじめに デザインに『奥行き』を与えると、ウェブサイトをユニークにし、ビジターに忘れがたい印象を与えることができます。それが抽象的な方法なものであっても、奥行きがリアリズムを与えます。グラフィックデザイン、ロゴ、ウェブデザインなどこういった付加的なリアリズムはあらゆるデザインにおいて、興味を引き起こすことができます。 また、奥行きを使うことで、特定のエレメントの強調をしたり、情報の正しい階層を作ることも可能です。フラッ
CSSでレイアウトするなら絶対覚えておきたいブロックレベル要素のクセとかいろいろ
Webデザインをするときに、必ず使うスタイルシート。思うようなレイアウトを作るために、チェックしておきたいブロックレベル要素や、インライン要素のクセみたいなのをまとめてみました。後半はスタイルが反映されない原因のひとつ、スタイルの優先順位についてです。 Attention 記事公開時からいろいろと勉強して、この記事内で紹介している事柄で、間違った解釈をしていたなーと気がつきました。 この記事の中でいくつか追記してありますが、詳しくは、新しく書いた 11月7日の記事：CSSでレイアウトするなら絶対覚えておきたい配置のルール：フロートや絶対配置、z-index とかいろいろ を読んでみてくださいね！ New Post Webサイトをデザイン、レイアウトするのに欠かせないのが CSS（Cascading Style Sheets、スタイルシート）ですね！今では CSS3 が話題を集めていて、CS
[非Webデザイナー向け] カッコイイブログを最速でデザインするための簡単 5 ステップ
こんばんは！ 先日の、はてブのホットエントリー PARKN’ PARK さんの 「「素人っぽいデザイン」から抜け出すために、デザイン制作時に心がけたい5つのポイント」に触発されてペンを取った私、坪内が本日はお送りします。 形式がほとんど決まっているブログデザインは、トップページと記事ページのデザインさえ固めてしまえば、あとはブログシステムが勝手にカテゴリーページや過去アーカイブページなんか作ってくれるので、 Web サイトを一からデザインする手間に比べれば、あっという間です。 ブログの本質はデザインでなく、コンテンツなので、手間を掛けるのであれば、コンテンツに手間を掛けるべきというのは、言わずもがな。 だからといって、デフォルトのテンプレでは味気ないし、似たようなブログとの差別化もしたいと思う気持ちも分かります。でも、Web デザインなんてよく分からないし、カッコイイのが自力でできると思え
![[非Webデザイナー向け] カッコイイブログを最速でデザインするための簡単 5 ステップ](https://cdn-ak-scissors.b.st-hatena.com/image/square/79efff2f49c095e8e26c6115e37661db91ff1b31/height=288;version=1;width=512/https%3A%2F%2Fblog.fenrir-inc.com%2Fwp%2Fwp-content%2Fthemes%2Ffenrir_dev%2Fimg%2Fcommon%2Fogp_dev_other.png)
サンプルデザインでわかりやすく見る。プロデザイナーが使うセオリー10のこと。 | Maka-veli.com
Webディレクターから見る、デザイナーさんなら当たり前にやってる事で 是非取り入れて欲しいという視点で書いてます。 グリッドレイアウト 目線の誘導にはグリットの設計は重要です。 Webなら特に縦位置を意識する必要があるかなと思います。 奇麗なグリッドが引かれたデザイン（線がある/ない、かかわらず） は、とても視認性が高く、目の誘導を行いやすいです。 シンメトリー 対照性なデザインは人の頭に一定のルールを認知させる事ができます。 それ故に、次のページなども惑わす事なく閲覧ができます。 また、単体的にも目線の誘導がされやすく、 かつ見た目も奇麗ですっと入ってくると思います。 アシンメトリー 逆に、ネガティブスペースを上手くつかい、 目線のジャンプ率を高くしたレイアウトも効果的です。 目的と用途で使い分けが重要かと思います。 タイポグラフィとビジュアルイメージ 和文書体、欧文書体で使い分け、
webデザインにおける視線誘導のおはなし | 07design.blog
こんにちは。今回はレイアウトの記事を書きます。「グーテンベルク・ダイヤグラム」という言葉をご存じでしょうか。 なんだかすごく中二心をくすぐられる言葉ですね。「グーテンベルク・ダイヤグラム」とは均等に配置された同質の情報を見る際の、・・・こんにちは。今回はレイアウトの記事を書きます。 「グーテンベルク・ダイヤグラム」という言葉をご存じでしょうか。 なんだかすごく中二心をくすぐられる言葉ですね。 「グーテンベルク・ダイヤグラム」とは均等に配置された同質の情報を見る際の、一般的な視線の流れのパターンを表した図式のことです。 簡単に言うと「人間の目は左上から右下方向へ、チラチラしながら遷移する」というものです。 こういった視線の流れのパターンは、エディトリアルデザインなどでは当たり前に使われている技法・考え方らしいです。 テキストをレイアウトする場合には、左上・右下に重要なコンテンツを配置す
407個のwebデザイナー＆デベロッパーズ向けフリーアイコンとアイコン配布サイト2サイト ｜https://wp.yat-net.com/name
2011年 06月 01日 407個のwebデザイナー＆デベロッパーズ向けフリーアイコンとアイコン配布サイト2サイト カテゴリ： フリー素材 タグ：アイコン作成支援ツール サイトにおけるアイコンですが、自作するのも良いですがハイクオリティなアイコンもpsdなどの状態でフリーでダウンロード出来る物などもあるのでこちらを使うのも有りだと思います。（但しライセンスに関してはリンク先等をご確認の上でご使用下さい。） 今回はwebデザイナーやデベロッパーズ向けのものを集めました。
「素人っぽいデザイン」から抜け出すために、デザイン制作時に心がけたい5つのポイント
☆ご注意☆ この記事は 2011年5月29日 に書いたものです。情報が古い可能性がありますのでご注意ください。 今も素人にちょびっっっとだけ毛が生えた程度ですが、 少しだけわかるようになりました。 毛の生えた私からツルツルの私へのダメだし Webデザイナーなりたてのころ、デザインのチェックをしてもらったとき、 「んーーーなんかこのへん素人っぽいね」と言われた事があります。 素人っぽい。。。？？？(゜д゜) そのときは何だろう、どんなのが素人っぽいんだろうとわかりませんでした。 就職はできたものの、技術は完全ど素人なので。 今も素人にちょびっっっとだけ毛が生えた程度ですが、 少しだけわかるようになりました。 「素人っぽい」の意味が。 毎日、たっくさんのWebサイトを見ますが、プロのデザイナーが作ったと思われる、構成もデザインもしっかりしたサイトもあれば、お店の人が一生懸命手作りしてそうなサイ
初心者のためのスマートフォンサイトを作るときに見ておきたいサイト｜WEB Drawer -WEB制作に関するメモサイト-
スマートフォンサイトを本格的に作るようになってきたので、いろいろ基本的なことから調べてみました。 自分はコーディングがメインなので、HTML/CSS/JSが主になっています。 制作する前に仕様の確認 スマートフォンの仕様が載っています。一通り目を通すと、製作してる時に「これができない！」などの問題が回避できるかもしれません。 ASCII.jp：サイト制作の前に知りたいiPhone/Androidの仕様｜実践！iPhone＆Androidサイト制作ガイド ASCII.jp：サイト制作の前に知りたいiPhone/Androidの仕様｜実践！iPhone＆Androidサイト制作ガイド スマートフォンサイトの制作 – 基礎編 – – ぺーぺーエンジニアのおぼえがき スマートフォンサイトの制作 – 基礎編 – – ぺーぺーエンジニアのおぼえがき iPhone iPad向けサイトを制作するためのいろ
シニア層のためのWebサイトユーザビリティ
2013年3月23日 ユーザビリティ 以前「笑っていいとも！」の山口智充さんのコーナーを見ていて、ちょっと驚いた事があります。20代～60代の女性の必需品をランキングしたもので、40, 50代女性では5位圏外だった「パソコン」が60代で3位にランクイン。シニア層のインターネット利用率は年々高まってきているのはニュース等で読んでいましたが、これを見てなんだか実感しました。という事で今回はシニア層のWebサイト設計について考えてみたいと思います！ ↑私が10年以上利用している会計ソフト！ 上記「笑っていいとも！」の件で興味を持った私は、シニア層のインターネット利用方法なんぞを調べていたところ、丁度私の母親が「インターネットで買い物がしたい」と言ってきました。彼女は海外に住む私と連絡をとるためにメールやSkype等を使う事ができるので、ある程度インターネットについて理解しているのだと思っていまし
オシャレなECサイト構築用のWordPressテーマ３０:phpspot開発日誌
30 Best Wordpress E-Commerce Themes - tripwire magazine オシャレなECサイト構築用のWordPressテーマ３０。 次のように、WordPressで作ったか分からないぐらいにカスタマイズされたテーマ集が３０個公開されています。 更にプラグインや、ビルトインの機能を使ってショッピングカートの仕組みも内蔵されているので、ECサイト構築用にも使うことが出来そうです。 使い慣れたCMSをECサイトにそのまま使うことでラーニングコストが最小化できそうですね。こまわりが効くかどうかなど検証は必要だと思いますが。 関連エントリ PHPで書かれた次世代のショッピングカートシステム「TomatoCart」 フリーで使えるPHP＋MySQLで構築されたショッピングカートシステム「Zeuscart」 カートが目立たず、いい感じにスライドしてくれるショッピン
NURO光（ニューロ光）の評判と口コミ。キャンペーンエリア内のマンションで使用ならあり
今回はnuro光の評判・口コミやそのサービス内容について徹底調査しました。 nuroの利用を検討中の方は是非参考にして下さい！ 速度が鬼？nuro光のキャンペーン評判・口コミを徹底調査！ 最大通信速度が2Gbpsと謳われているnuro光ですが、そのサービスは実際に使ってみてどうなのでしょうか？ ここからはnuro光の評判について、光回線では重要となる主に以下の点に分類してそれぞれSNSやネット上の口コミから参考になりそうなものをまとめました。 通信速度 料金 サポート 回線工事に要する期間 その他サービス 最近インターネットが遅いなぁなんて御嘆きのそこのあなた。 日本最高速の光回線nuro光であれば爆速のインターネット体験が出来ますよ。 今なら35000円のキャッシュバック可能です。 nuro光公式サイトは以下からどうぞ。 nuro光公式サイトはこちら 光回線おすすめ安い比較ランキング。プ
Fireworksで立体的なアイコンを作る方法 - EC studio デザインブログ
サイトや広告バナーをつくる際に、イメージアイコンを使うことがよくあります。 ただ、配布されているイメージアイコンを使用する場合、 「形を少し変えたい！」 「複数のアイコンを組み合わせて使いたい！」 など、サイトなどの雰囲気に合うよう、手を加えたくなる時があります。 ただ、データの加工が不可だったり、加工するのに時間がかかったり… 時間短縮のために配布素材を使ったのに意味がなかった！なんてこともあります。 そんな時はイメージアイコンを 最初から自分で作る！ というのも1つの方法です。 今回は、Fireworksを使って簡単に立体的なアイコンを作る方法を ご紹介したいと思います。 作業は単純。 パスの合体 パスの切り抜き 拡大縮小 の繰り返しです。 1.形をつくる 楕円を2つ描きます 楕円の上に四角を重ねて合体させます 合体したパスの上にさらに四角を重ねて切り抜き、余分な部分をカットします 合
ウェブ制作にきっと役立つインフォグラフィックのまとめ
内容もさることながら、デザインも素晴らしいウェブ制作関連のインフォグラフィックを紹介します。 ウェブ制作にきっと役立つものから、にやりとするものまでを厳選しました。
枠線付きの吹き出し
ミニブログの隆盛以降ウェブ上でよく見かける吹き出しをCSSで作るお話。単色のものはかなり前に書いた。今回はそれに枠線をつけてみよう！ みよう！ みよう！ Demo: Bordered Speech Bubble 枠線は単なるsolidなborderで少し角を丸めただけ。 尻尾を付ける :before擬似要素を使う。デモの3番目のサンプルのように、まず枠線と同じ色で三角形を作る。三角形は以前のエントリで書いた手法と同じで、左右のborderをtransparentにすることによって作る。 .speech-bubble:before { border-top-width: 16px; border-right-width: 16px; border-bottom-width: 0; border-left-width: 16px; border-color: #369 transparent;
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
YouTube人気急上昇
http://designaholic.cc/2011/03/webweb21.html
