A showcase of the world's finest web design.
All Websites on Siteinspire
A showcase of the world's finest web design.
Hamburgers
Table of Contents Usage Sass Customization Accessibility Browser Support Usage Using Hamburgers for your site is easy (well, that was my intention anyway). Download and include the CSS in the <head> of your site: <link href="dist/hamburgers.css" rel="stylesheet"> Add the base hamburger markup: <button class="hamburger" type="button"> <span class="hamburger-box"> <span class="hamburger-inner"></spa
コラム｜株式会社プロネクサスのweb制作部門レインボー・ジャパン
平日10：00〜19：00（土日祝日を除く）営業、パートナー応募のお問い合わせはお受けしておりません。
テキストの頭を揃える話 | murmuring design
こんにちは、行頭の視覚調整原理主義者、アートディレクターの関口です。 僕はもともと紙のデザインからキャリアをスタートしているのですが、それが災い？して、どうしても気になって工数を掛けそうになってしまうポイントがいくつかあります。 全角記号により行頭がずれている こちら。よくある光景ですね。 日本語は基本的にいわゆるプロポーショナルではないので、全角の役物（記号）を文頭に入れるとこういったズレが生じます。当たり前だろーと気にならない方もいると思うのですが、ユーザーのスムーズな視線移動を妨げる感じがして、僕はどうしても気になってしまうのです。静的なページなら良いですが、システムで吐いているテキストであるとか、最近はデバイステキストで組むのが主流ですから、そういった場合はよくこういうケースに遭遇します。よくあるんですよ、やっぱり。自分で原稿書いてみるとわかるのですが。 しかし、しかしですよ！ よ
WordPress で Web サイトの制作を請け負って保守契約も結ぶときに意識しておいたほうが良い5つのこと
反応をウォッチしていると「WordPress を導入する場合、セキュリティを考えると当然システム保守契約を結んで保守することが必要」という意見がちらほらあって、僕としてもそれは当然のことでむしろやっていない人は作成した後えらいことになってないのか少し心配になったりしてしまうのですが、じゃあクライアントと保守契約を結べたとしてどういうことに気をつけたほうが良いかということを少し書いてみたいと思います。 コア・プラグインのアップデートは必ず実施する 大前提すぎてあれなのですが、セキュリティを維持して攻撃を防ぐためにお客様にシステム保守契約を結んでいただくわけなので、コアやプラグインのバージョンアップは必ず行わないといけません。企業さんのサイト制作の場合だとテーマはオリジナルのことが多いと思いますが、テーマも自作でないのであればきちんとアップデートするべきです。 「コアの自動アップデートをとめる
早稲田大学のサイトリニューアルはなぜスゴイのか？
2014年11月5日(水)、早稲田大学公式サイトが、株式会社CINRAの手により、見事なリニューアルを遂げました。 プレスリリースに書かれた彼らの目論見通り、「国内外の大学と一線を画す、最新のグローバルサイト」と言えると思いますが、なぜ、国内屈指の大規模校である早稲田の公式が、ここまで個性的なサイトになっていると感じるのでしょうか。 日々大学サイトの構築に向き合うWebディレクターの立場から、その「スゴイ」理由を、少し考えてみました。 1 – 「メディアサイト」として尖らせたから 一般的に大学サイトは、ある程度メニュー内容も共通化され、情報公開に重きを置いた「ポータルサイト」として位置づけられることが多いと思います。 しかし、新しい早稲田のサイトは、細かいコンテンツは「別サイト」に任せ、新着記事とリンク集で構成される「メディアサイト」に大きく振ってきました。 海外大学サイトでは「News」
Website Builder — Create a Website in Minutes — Squarespace
A collection of inspirational websites made by real Squarespace users. Stories and solutions for the modern entrepreneur. In-depth guides and videos about the platform, our services, and how to get started. An online community for Squarespace users and professionals to discuss best practices and seek advice. Free, online sessions where you’ll learn the basics and refine your Squarespace skills. Ea
オリジナルフォントを使ったデザイン - クックパッド開発者ブログ
こんにちは、ユーザファースト推進部デザイングループの元山です。 デザイナーの皆さんはWebやアプリなどをデザインする上でフォントを作った事があるでしょうか？ ずいぶんと前から「これからはWebフォントの時代だ」なんて言われながらも、現実は中々使うのが難しいなぁと感じている方は多いかもしれません。 今回はクックパッドで実際に作ったオリジナルフォントを使ったWebやアプリのデザインについて事例を交えながら紹介してみたいと思います。 クックパッドでの事例 印象と機能を向上させるデザインのためのフォント ブラウザやアプリの標準のフォントではない特殊なフォントを使う理由として真っ先にあげられるのは、やはり文字の雰囲気や見た目でデザイン的な印象や見え方を向上することができる点だと思います。最近ではAppleのWebサイトもオリジナルのWebFontを使ったデザインに変わりましたね。 クックパッドでは特
デザインって何だっけ？ と仕事中に考えた話 — Medium
Don’t write aloneCopy and send this draft link to anyone. They’ll be able to leave you notes before you publish. 編集者という存在の大きさ コンテンツから先に考えなければデザインすらできない理由 : couldこちらの記事を読んでいろいろ素朴に思うことがあったので、ちょっと書いてみようと思う。とくにオチもなければ、否定的な気持ちもない。Web は紙媒体とは違うとよく言っていますが、雑誌から学べるところがあります。それは、雑誌は必ずコンテンツからスタートしている点です。雑誌の制作プロセスは中身もないのに表紙から作り始めることもなければ、原稿があがる前にレイアウトを作り始めることもありません。大まかなシステムを作るところから始めることができる、まずは形にすることができるのが Web
Web サイトを簡単に多言語化！ Google ウェブサイト翻訳ツール vs Bing 翻訳ウィジェット – プログラミング生放送
Web サイトに翻訳機能を付けられるツール Web サイトにコードを貼り付けるだけで多言語化できる Google ウェブサイト翻訳ツール と Bing 翻訳 ウィジェット を比較してみました。 翻訳ツールによる多言語化のメリット・デメリット はじめにウィジェットによる考えらえるメリット・デメリット。仕組みとしては既にある Web ページにツールを配置して、スクリプトにより自動翻訳の結果に差し替えるというものです。 メリット HTML を少し変えるだけで設置が簡単、労力が少ない 簡単に多数の言語に対応できる デメリット 自動翻訳の質が悪い 訪問者の期待も低い Web ページごと翻訳できるサービス（Google 翻訳、Bing 翻訳）でアクセスされた場合、自動翻訳結果の修正が反映されない Web 検索できない というところでしょうか。 Google vs Bing 機能比較概要 投稿時点での比
jquery.kerning.js
jQuery.Kerning.js A jquery plugin which adjust text kerning in HTML. Get Source Demo うつくし明朝 - plain ポラーノの広場 あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎらひかる草の波。 うつくし明朝 - kerned ポラーノの広場 あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎらひかる草の波。 M+ 2m Regular - plain ポラーノの広場 あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎらひかる草の波。 M+ 2m Regular - kerned ポラーノの広場 あのイーハトーヴォ
Design with web fonts in the browser - Typecast
The world’s best fonts, type designers and foundries. Trusted and secure font management. Integrated with the tools you use everyday. Controlled annual cost. What if you had unlimited access to the world’s largest collection of fonts, with search tools that found the perfect font whenever you needed one? Find the Monotype Fonts plan that’s right for you.
Koa - next generation web framework for node.js
IntroductionKoa is a new web framework designed by the team behind Express, which aims to be a smaller, more expressive, and more robust foundation for web applications and APIs. By leveraging async functions, Koa allows you to ditch callbacks and greatly increase error-handling. Koa does not bundle any middleware within its core, and it provides an elegant suite of methods that make writing serve
桜新町の主婦が教えるGrowth Hack
桜新町の主婦が教えるGrowth Hack Presentation Transcript 桜新町の主婦が教える Growth Hack １ 自己紹介 桜新町の主婦 私と一緒に、自然とユーザが増えるしくみを作りましょ∼！ ２ アジェンダ グロースハッカーって何かしら？ SNS で影響力を向上させましょ∼！ バズられる工夫をしましょ∼！ まとめよ∼！ ３ グロースハッカーって何かしら？ ４ 例えば…１ 入力項目を順に出す 登録画面の入力欄を３つから１つに変更してみましょ∼！ ５ 参考：1-800-DENTIST Boosts Sign-ups by 23.3% 例えば…１ 入力項目を順に出す 登録画面の入力欄を３つから１つに変更してみましょ∼！ 登録率 23％UP!! ６ 参考：1-800-DENTIST Boosts Sign-ups by 23.3% 例えば…2 すぐに使わせる 登録時に
「Web制作者」ってHTML屋じゃないと思うんだよね
神戸ITフェスティバル2013にてconcrete5のご紹介をしてきました。5つのCMSの開発者やユーザーが順番にそれぞれのCMSを紹介し、最後に座談会をするという珍しいイベントでした。CMSを選定したいと思っている意欲の高い方が参加されていましたので、concrete5について色々特徴や他のCMSに比べて良いと思っているところなどを詳しくお話ししました。 このイベントのなかで他のCMSのプレゼンもずっと聞いていたのですが、SOY CMSの古荘さんがおっしゃったひと言がすごく印象に残りました。 コンテンツ = 企業の価値 #kif2013 — Takuro Hishikawa (@HissyNC) December 13, 2013 ホームページをリニューアルしたら社長ブログを作りましょう、毎日更新しましょう、何げない日常の話題でいいので毎日更新することが大事なんですよ、ページ数が増えると
新しいものが大好きなグッドパッチで7月に話題になったアプリ、サービス、デザインまとめ（2013） | Goodpatch Blog
7月も終わりますが、まだまだ暑い日が続きますね。今月もおもしろいWebサイトやアプリなどが社内でたくさん共有されました！7月に一番話題になったのは、MEMOPATCHでも紹介したLeap Motionでしょうか。先週ついに弊社にも届いたので早速みんなで試しています。（Leap Motionに関する記事→ 「未来はすぐそこ！次世代インターフェース、Leap Motion」） それでは今月もGoodpatchで共有された新しくておもしろいデザインやアプリ、Webサービスをご紹介します！ Heml.is https://heml.is/ シンプルできれいなメッセンジャーアプリです。チャット画面が少しiOS 7のメッセージアプリに似ていますね。 Circa http://cir.ca/ ニュースアプリ。読みやすいように人力でニュースを編集しているらしいです。メニューがぺらっとめくれるアニメーション
これはウェブページです｡
たいしたページではありません｡ あるのは言葉だけ｡ それをあなたは読んでいます｡ オシャレなデザインや､レスポンシブなレイアウト､魔法のようなスクリプトに私たちは魅了されてしまいました｡ でも､ウェブで一番強力な道具は､今も昔も言葉です｡ 私が書いた言葉を､あなたが読んでいる｡これこそ魔法です｡ 私はブリティッシュコロンビア州の小さな都市にいますが､あなたは別のどこかにいることでしょう｡私は2013年6月20日の早朝にこれを書きましたが､あなたは違う日時にこれを読んでいることでしょう｡私はノートパソコンでこれを書きましたが､あなたは携帯電話でこれを読んでいるかもしれないし､タブレット端末やデスクトップ端末で読んでいるかもしれません｡ 私とあなたがこうして繋がることができたのは､私が書いた言葉をあなたが読んでいるからです｡ウェブとはそういうものです｡場所や端末､タイムゾーンが違っても､このシ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Iconic
フリーランスの全国Webサイト制作料金表 2013年度版
ファーストビュー都市伝説 - ページ上部に詰め込むのはダメデザイン？ | 初代編集長ブログ―安田英久
