あの頃みんな若かった。国内有名16サイトの2008年→2014年のデザイン比較
こんにちは、結婚式で悪友に高校時代のポエム的なものを晒されたゆうすけです。 そういうの、本当勘弁してほしいんだよな。 先日Macの古いデータを整理していたところ、2008年頃のウェブサイトのキャプチャー画像を大量に発見。当時はWebデザイナーではなくエディトリアルデザイナーだったのですが、デザインの練習（模写）のために取り溜めていた様子。 あの頃の自分は結構真面目だったのかもしれない。 やっぱり今とだいぶ違うなー。具体的にどこが変わったのかな？と結構楽しく眺めていたのですが（どうしてアナログデジタル問わず、掃除をすると懐かしくて手が止まってしまうのか！）、せっかくなので記事としてまとめてみることにします。 当時の担当デザイナーがもしこれを見たら、恥ずかしくてたまらないかもしれないですけどね。一度世に出したものですからね。しょうがないね。 大阪府知事に橋下徹氏が就任し、船場吉兆があの伝説的な
ウェブサイトで珍しい形を取り入れたサイト14こ紹介
creative memomemo Webデザインtips,Photoshoptips,クリエイティブでステキなものをまとめているブログ。 こんにちは。最近はブログメディアのデザインを作る機会が多くなってきました。井畑です。 ブログメディアはコーポレートサイトと比べ、よりデザインや装飾等で「個性」を出す場合が多くあります。どうしたらいいかなーと思って色々悩んで、「形」で個性を出すのもありかなと思い、ウェブサイトではあまり使われづらい三角形や五角形、六角形を上手く使っているサイトを調べてみました。 やはり印象に残るものが多かったです。それでは早速見てみましょう!どうぞ！ 三角形を使ったデザイン 三角形を使う場合、余白をどう活かすかが重要になってくると思います。 Snowbird Snowbird コンテンツのサムネイルが三角形です。マウスオーバーすると折り紙が広がるように画像が広がるのも面白
レイアウトとは？プロも使う原則やコツ・テクニックまとめ | LISKUL
レイアウトとは、テキストや画像などの要素や、家での家具などを効果的に配置するためのプロセスです。 レイアウトを戦略的に活用することで、ビジネスシーンでは相手にメッセージが伝わりやすくなったり、日常生活では生活導線が改善されるなどの効果が期待できます。 しかし具体的には、どのような場合に、何をすればよいのかわからないという方も多いのではないでしょうか。 そこで本記事では、レイアウトの基礎や、関連する原則、レイアウトの流れ、文書・ポスター・家具など様々なシチュエーションでのレイアウトのコツを一挙にご紹介します。 ビジネスシーンや日常生活でのレイアウトにお悩みの方は、ぜひご一読ください。 レイアウトは、テキスト、画像、その他の視覚的要素を効果的に配置し整理するデザインプロセスです。 このプロセスは、情報を整理し、視覚的にアクセスしやすい形にすることを目的としています。具体的には、ページやスクリー
HTMLテンプレートの基本ファイル一式、Webページを実装するための必要最小限をまとめたHTML
HTMLで、Webページやアプリを作成する時に役立つ、フロントエンド用に必要最小限をまとめたシンプルなHTMLの基本テンプレートのファイル一式を紹介します。 v.8.0.0がリリースされ、現在の環境に合わせた設計にアップデートされました。 IE11を含む、すべてのモダンブラウザをサポートしています。 HTML5 Boilerplate -GitHub HTML5 Boilerplateの特徴 HTMLの基本テンプレート HTML5 Boilerplateの使い方 HTML5 Boilerplateの特徴 HTML5 Boilerplateは、Webサイトやアプリを実装するためのプロフェッショナルなフロントエンド用のHTMLの基本テンプレートです。 実践的な基本のテンプレート 200人を超える貢献者による分析・研究・実験をもとにしています。 ブラウザの見え方を最適化 プログレッシブエンハンス
ウェブデザインをはじめるあなたへ - ウェブ雑記
ウェブデザインについてまったくわからない頃によく見て勉強してた資料群です。＋いくつかの自分で作った資料 SlideShare 色彩センスのいらない配色講座 色相、明度、彩度で色を説明できるようになる。 ベースカラー、メインカラー、アクセントカラーで配色を説明できるようになる。 その上で、あまり間違いのない色の選び方がわかるようになる。 ノンデザイナーのための配色理論 最後に紹介されているこのツールがベースカラー、メインカラー、アクセントカラーを決める上で便利。 ウェブサービスの企画とデザイン 僭越ながら明治学院大学で講義した時に作った資料。 なんとなくウェブサービスを作るときの流れとか感じてもらえたら幸いです。 かんたんキレイなウェブデザイン 僭越ながら勉強会 (UT Startup Gym) 用に作った資料。 なんとなく CSS フレームワーク、グリッドシステム、レスポンシブデザイン、ウ
Web制作者が捗る！知識が増える2014年トレンドまとめ
作成：2014/06/9 Web制作 > トレンド感のある動きや、洗練された見え方を実現するために、知っておきたいことや方法など。Web制作の現場で知っておくべきことをまとめました。全部取り入れるのは無理ですが、押さえておくことで今以上に見栄えのするサイトを作れると思います。ここ最近のトレンドをおさらいしたいときに。 エンジニア速報は Twitter の@commteで配信しています。 もくじ ファーストビューで使いたいエフェクト １．ロングシャドウ ２．ポリゴン ３．ラージフォトスタイル ４．ブラーエフェクト ５．フルスクリーン動画 ６．画像シーケンス 脱ビットマップ画像 ７．SVG ８．Webフォントを円で囲む 配色・フォント ９．配色(フラットデザイン) １０．タイポグラフィ(フラットデザイン) １１．フォント(フラットデザイン) 効果 １２．Infinite Scroll(無限スク
コーポレートサイトとは？その役割と必要なコンテンツ一覧 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
コーポレートサイトとは、自社の紹介を目的としたWebサイトのことをいいます。 営業や広報に代わって自社の紹介をしてくれる重要な役割を担っていますが、目的が曖昧なまま制作してもその効果を十分に得ることはできません……。はより高い効果を得るためにはどのような工夫が必要なのでしょうか？ 今回はコーポレートサイトとはどんなものなのか、その役割や目的、さらにはコーポレートサイトを作成する上で必ず知っておくべきポイントを紹介します！ 株式会社LIGって？ 2007年設立、東京都台東区発のWeb制作会社。年間150のWeb制作・サイトリニューアル実績をもち、毎年複数のWebデザインアワードを受賞している。月間200万PVのWebメディア「LIGブログ」で培ったマーケティングのノウハウを生かした企画力、複数の海外拠点を生かしたシステム開発力も強み。 👉Web制作の詳細・実績 ※編集部注：2024年1月に
ウェブのデザインやアイデアによい刺激をうける日本のウェブサイトのまとめ
いつもは海外のウェブサイトをテーマごとにまとめて紹介していますが、たまには日本のもと思い、まとめてみました。 デザインやアイデアによい刺激をうける国産のウェブサイトを紹介します。 海外のも定期的にまとめています。 面白いアイデアを使った最近のウェブサイトのまとめ -2014年3月 デザインや仕掛けが素晴らしいウェブサイトのまとめ -2014年1月 MIDORI AOYAMA DJ/プロデューサー Midori Aoyama氏のサイト。フラット・スクロールの定番のトレンドに斜めのグリッド、ポリゴン、アニメーションなど最新のデザインが非常にかっこいいです。制作会社はLETTERS, INC.で、今日リニューアルしたばっか！
ウェブサイトのリニューアル時にチーム全員、クライアントとも確認しておきたい4つの大切なポイント
他のサイトがしてるからフラットにしたり、スクロール前提の長いページを使ってみたり、トレンドは確かにかっこよく魅力的に見えるかもしれません、しかし本当にそれが自分のサイトに適しているのか検討することが非常に大切です。 制作者だけでなくクライアントともしっかりと確認しておきたい、ウェブサイトをリニューアルする際に陥りがちな4つの間違いを紹介します。 4つとも大切ですが、特に3つ目は大きなプロジェクトになるほど重要ですね。 Top Mistakes When Redesigning a Website 下記は各ポイントを意訳したものです。 翻訳・画像の掲載にあたっては、Onextrapixelの許可を得ています。 はじめに：リニューアルの結果に1/3が満足していない 1. トレンドをむやみに取り入れる 2. 自分のデザインの殻に固執する 3. 具体的な期限と手順を決めない 4. 一度にまとめてリ
新規顧客を逃さないECサイトデザイン
2014年5月12日 Webデザイン, ユーザビリティ ECサイトの構造はとっても複雑。ユーザーは好みの商品を検索し、その中から実際に購入するものを比較・検討・選択、さらにフォームに入力するというプロセスを経て、ようやく購入完了となります。オンラインショッピングに慣れている私でも、新規サイトでは苦労することが多いです。そこで使いやすいECサイト、特に新規客に優しいサイトデザインとはどんなものなのか、考えてみました。 ↑私が10年以上利用している会計ソフト！ 目的の商品ヘ素早くアクセス ECサイトはスピード勝負だとよく言われています。それはページの読み込み時間という体感速度はもちろんですが、いかに簡単に目的のページに到達できるかも大切です。特に何が欲しいのか決まっているというユーザー層は、急いでいるわけではありませんが、そのサイトに長居するつもりはありません。目的の商品を素早く表示するのはも
初心者デザイナーにオススメ！アイディアの集め方とその活用方法 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、デザイナーの佐藤タカアキ（@sato_tkaaki）です。 突然ですが、柔らかいものは脳に快感を与えて、緊張を緩める効果があるって知っていますか？ 脳がリラックスすることにより、様々なアイディアが生まれるのだそうです。 日々の業務でアイディアに詰まってしまう時もありますよね。 そういう時はほっぺたを触ってリラックス…しても出ません、そんなんじゃ。 そこで今回は、デザイナーにオススメしたいアイディアの集め方とその活用方法をご紹介します。 なぜアイディアが浮かばないのか？ そもそも、どうしてアイディアが浮かばないのでしょうか。 感性が豊かじゃないから？暇さえあればいやらしい妄想ばかりしちゃってるから？ちがいます。 それは経験や知識など、そもそも持っている武器が少ないからではないでしょうか。 ここで再確認しておきたいのは、ゼロから生まれるアイディアは存在しないということ。 アイディア
スマホサイト最適化25の最新ルール | グロースハックジャパン | growth hack japan
Ryutaro Mori TwitterでGHJをフォロー！ FacebookでGHJをフォロー！ NEW スタートアップに欠かせない6種類の人間 検索エンジン大手グーグルが、スマホサイト最適化に関する大規模なリサーチを行いました。 その結果から導き出した「スマホサイト最適化25のルール」は、モバイル時代、特にtoCビジネスには欠かせない内容です。 調査に関して 本調査は、GoogleとAnswerLabの共同指揮の下に行われました。 モバイルサイトにとって最良のデザイン慣行を提言することを目的に行われた本調査は、以下の方法論で実行されています。 ・シカゴ・サンフランシスコにて、119時間のユーザービリティテストを敢行 ・iOS・Android両方を含むユーザーに調査を実施 ・ユーザーは、商品の購入、価格の調査、予約など、コンバージョンに関連するタスクを実行し、各サイトのユーザービリティを
最近のウェブデザインのトレンドを取り入れたページレイアウトのPSD素材のまとめ
ただ見ているだけでもその美しいレイアウトに惚れ々々してしまう、最近のウェブデザインのトレンドを取り入れたウェブページやスマフォページのPSD素材を紹介します。 PSDが全部ダウンロードできるので、実用にも勉強にも役立ちます！
アドビ―Dreamweaverデベロッパーセンター
Enhance and extend DreamweaverDreamweaver provides its own API as well as the Common Extensibility Platform (CEP), and offers you the flexibility of using C++, HTML, CSS, and JS to build extensions for Dreamweaver. You can extend the Dreamweaver UI, add powerful features for building web apps and automate entire cross-application workflows. Build custom web development toolsImport database data in
Ligature Symbols
HTML & CSS Please copy & paste this code to your HTML file or Stylesheet. <p>Simple use for mailto link.</p> <a href="mailto:mail@example.com" class="lsf">mail</a> <p>Use tha icon with text.</p> <a href="http://twitter.com/" class="lsf-icon" title="twitter">Twitter</a> <p>Use tha icon with unicode.</p> <a href="http://amazon.com/" class="lsf-icon amazon">Amazon</a> /* CSS */ @font-face { font-fami
40分でできるホームページ診断 ～最低限クリアしたい40項目のチェックシート | Web担当者Forum
40分でできるホームページ診断 最低限クリアしたい40項目のチェックシート［訪問者目線編 2008年版］ SEO？ ユーザビリティの向上？ それ以前にしなきゃいけない「サイト作りの基本のキ」を、あなたのサイトではちゃんとできているだろうか？ 高度な施策に目を向ける前に、最低限クリアしておきたいチェックポイントをまとめてみた。あなたのサイトは何点とれるだろうか？ TEXT：編集部 協力：株式会社 環 ウェブサイト作りの基本のキSEOやユーザビリティに限らず、キーワード広告、アクセス解析、LPO、リッチインターフェイスなど、サイトの効果をアップさせる手法はさまざまあり、Web担でも詳しく解説してきている。 しかし、そういった施策にコストを割く前に、現状の自社サイトが、訪問者が「あれれ？」とマウスをうろうろさせてしまうような状態になっていないか確認したことがあるだろうか。 そんなあなたのために、
私がWEB制作ネタを探している海外サイトベスト10
最近よく聞かれるのですが、一体Yamada氏のネタ元はどこですかと聞かれます。 ネタ師であるブロガーがネタ元を晒すのはどうかと思っていたのですが、有益である情報は晒すべきだと友人に言われてしまったのと、海外でまとめエントリにされていたので公開に乗り切ります。 より有益な情報を得る為に 友人いわく、公開してその上を目指せ、とか意味がわからないことを言われましたが、結局のところ海外の数々の有益な情報からピンポイントで発信するからこそ価値があるのであって、まとめサイトが有益なものであるとは限りません。 これらネタ元をつかって、より多くの方にピンポイントで面白い記事の発掘が出来るようになれば、それはそれで自分にかえって来るんだなぁと思います。 WEB制作者向け発掘サイト DZone - fresh links for developers デザイン、CSS等に関して有益なエントリが上ってくるシステ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
新着記事
2007年度web制作者の為のまとめ再構築30選*ホームページを作る人のネタ帳
youmos - 新しいWebビジネスや技術アイデアを活性化するWebマガジン