15 Useful Code Snippets for Smartphone Website
2014年8月22日 Webサイト制作, スマートフォン スマートフォンが普及してきて、Webサイトを作る時、スマートフォンサイトも一緒に制作している方も多くなってきていると思います。私もスマホサイトを制作する機会が増え、だんだんEvernoteに保存していたスマートフォンサイトを作る時の小技がたまってきたので、iPhoneで使える小技を中心にまとめて記事にしてみます。いくつかサンプルも作っているので、スマートフォンからあわせてご覧下さい！ ↑私が10年以上利用している会計ソフト！ スマートフォンサイト用小技集 目次 いくつかサンプルも作ったのでスマートフォンから、もしくはブラウザーからユーザーエージェントをiPhoneなどに切り替えてご覧ください！ 横幅をデバイスの幅にあわせる 文字サイズの自動調整をオフ リストのクリック（タップ）範囲を広げる 画面の幅にあわせてCSSを変える リンクテ
Twitter 人気のつぶやき 2011年 トップ30
2017年6月30日 話題のWeb関連情報 WebクリエイターボックスのTwitter: @webcreatorboxでは毎日Webに関する記事や美しいデザイン・写真などを紹介しています。昨年同様、今年人気だったつぶやきトップ30を紹介します。週間ランキングで1位、2位だったものがほとんどなので面白い記事がつまっていますよ！時事ネタや特設サイト等で既に見ることのできないサイトは省いているので、そんな記事も見逃したくない方はぜひフォローしてみてくださいね！ 1. スラムダンク作者の井上雄彦氏 @inouetake が笑顔のイラストを描き続けています。 この記事をRTする 2. 職業病ってことかなｗ／ネタ：※病気の人には透明に見える画像 on Twitpic この記事をRTする 3. ロゴ：19歳のデザイナー、jonathan mak氏による「Thanks, Steve」ロゴが話題に。 この記
もうユーザーを迷わせない！ナビゲーションメニュー設置のコツ
2013年11月22日 Webサイト制作, ユーザビリティ どのWebサイトにも必ずあるのがナビゲーションメニュー。各コンテンツページへリンクされている「Webサイトの目次」です。この目次をきちんと設置していないと、ユーザーは欲しい情報が見つけられず、離脱率が高くなります。そのサイトでしか手に入らない、本当に必要な情報でない限り、こちらから案内しないとユーザーはコンテンツを探そうとしません。そんなナビゲーションメニューについて考えてみましょう。 ↑私が10年以上利用している会計ソフト！ ナビゲーションメニューの設置ポイント すべてのページに 基本中の基本ですが、メインのナビゲーションメニューはどのページにも同じ場所に設置しましょう。ホームページでしか表示されない…なんてことがないように。というのも、ユーザーが最初にたどり着くのが必ずしもホームページとは限らないからです。検索で特定のコンテン
少しの手間で大きく変わる、細部にこだわったWebデザインを
2017年6月29日 Webデザイン 「デザインしてみたけどなんだか物足りない…」そんな経験ありませんか？私はよくあります。それで色を変えてみたり、形を変えてみたりと色々試してみるのですが、結局どれもしっくりこなかったり。そんな時は元のデザインにほんの少し手を加えるだけで納得のいくデザインに変わることが多いんです。わずかな装飾で大きく印象を変える。そんな「ひと手間」に注目してみましょう！ ↑私が10年以上利用している会計ソフト！ 追記：Photoshopを使った加工の仕方を記事にしてみました！ » 【実践編】少しの手間で大きく変わる、細部にこだわったWebデザインを グラデーションを加える 「デザインしてみたけどなんだか物足りない…」そんな時はわずかなグラデーションを加えるだけで立体感がでて、ノッペリしたデザインを一新することができます。アレコレ装飾するよりもシンプルかつ王道。 ヘッダーの
時間 vs お金 vs クオリティ
2013年3月23日 Web関連記事 デザイナーのアイデアや考えを記事にまとめているブログ「xheight」の中で時間とお金とクオリティのバランスについて述べた記事「Time vs Money vs Quality」を読んで、短い記事ながら「ほほーぅ」と思ったので意訳してみたいと思います。バランスの取り方は自分次第ですね。料金設定の見なおしをしてみるのもいいかも。 ↑私が10年以上利用している会計ソフト！ この時代、デザイナーはデザインをするだけでなく、それ以上のマルチスキルが求められます。マルチスキルーー例えばビジネス・営業担当、ロゴデザイナー、グラフィックデザイナー、Webデザイナー、Webデベロッパー、SEO専門家、現代のスーパーヒーローなどなど（最後のはなんか違う気がしますが、意味わかりますよね）。 しかしクライアントのこととなると、その点が注目されずにおわります。 通常、彼らは優
Web屋の私がブックマークしているサイト65 | Webクリエイターボックス
2017年7月14日 便利ツール 久しぶりに自分がブックマークしているサイトを整理してみました。昔から変わらず愛し続けているWebサービスやチュートリアルサイトなど多数あったので一挙にご紹介します！有名どころからあまり知られていないけど便利なサイトまで、多数あるので時間のある時にじっくり見てみてください！ ↑私が10年以上利用している会計ソフト！ ブックマークしているサイト 目次 Webサービス デザイン関連 画像関連 CSS jQuery WordPress フォント スマートフォン 配色関連 HTML5 メルマガ Webサービス 1. Sendoid Sendoidは会員登録不要のファイル送信サービス。ファイルをアップロード後にURLが生成されます。パスワード設定可。 2. HTMLエンコードフォーム HTMLエンコードフォームは特殊記号などをエンコード・デコードしてくれるWebサービ
生活をもっと便利に・楽しくしてくれる無料Webサービスいろいろ | Webクリエイターボックス
2017年6月30日 便利ツール 「こんな事がネットでできると便利なのになあ」と思った事はありませんか？生活に「便利」「楽しみ」をくれるサービスが無料であれば嬉しいですよね！ということで、今回はWebに詳しくない人でも簡単にはじめられるWebサービスを紹介します。中には会員登録も不要なものも！今直ぐ試してみてください！ ↑私が10年以上利用している会計ソフト！ ファイルシェア Sendoid Sendoid 会員登録不要のファイル送信サービス。ファイルをアップロード後にURLが生成されます。パスワード設定可。おすすめです！ イベントスケジュール ATND（アテンド） ATND（アテンド） イベント・カンファレンス・勉強会の告知や参加者管理が簡単にできるサービス。イベントの詳細を入力したり、参加予定者がコメントしあったりできます。Twitter、Google、Yahoo、Mixiなどでログイ
少しのコードで実装可能な20のjQuery小技集
2016年6月22日 jQuery 素敵な動きを手軽に実装できるJavaScriptライブラリ「jQuery」。jQueryには多くのプラグインが揃っていますが、以前書いた「少しのコードで実装可能な20のCSS小技集 」に続き、今回はプラグインなしで実装できるjQueryの小技を紹介します！「jQueryってなんだ？」という人もコピペで実装できますよ！サンプルも用意したのでぜひご覧ください！ ↑私が10年以上利用している会計ソフト！ 追記：この記事で紹介されているいくつかの方法が、今ではCSSのみで実装可能です！詳しくは「かつてはJavaScriptを利用していたものの、今ではCSSのみで実装できる10の小技」をご覧ください。 jQueryの基本的な使い方 まずはjQuery本家からjQueryファイルをダウンロードします。<head> 内に下記を記述し、jQueryファイルを読み込みます
テーマカラー1色をメインに用いたWebサイト50
2018年10月11日 Webデザイン, インスピレーション, 色彩 前回の記事「WebデザイナーにおすすめのEvernote活用術」で紹介したように、私はEvernoteに素敵なデザインをストックする際、使われているテーマカラー別にタグをつけて分類しています。気がつけば各色のデザインストックが増えてきたので、その中でも厳選した5サイト×10色の合計50サイトを紹介します。単色をデザインに使う時のポイントも一緒に読んでみてくださいね！ ↑私が10年以上利用している会計ソフト！ 追記：リンク切れサイトを削除したため、数が減ってます… テーマカラーをメインに取り入れる時のポイント 「配色に自信がなくても！Webデザインが好きになる配色ツールと使い方」でも紹介したとおり、きれいな配色でもベタ塗りしただけではデザインの魅力が半減してしまいます。特に今回のようにテーマカラーを使う面積が広ければ広いほ
Twitter 人気のつぶやき 2010年 トップ30
2017年6月29日 Twitter 人気のつぶやき WebクリエイターボックスのTwitter: @webcreatorboxでは毎日Webに関する記事や美しいデザイン・写真などを紹介しています。その中で今年人気だったつぶやきトップ30を紹介します。時事ネタや特設サイト等で既に見ることのできないサイトは省いているので、そんな記事も見逃したくない方はぜひフォローしてみてくださいね！ 1. アート: まるで美術館！スウェーデンの地下鉄がすごすぎる この記事をRTする 2. 【仕事中の人は観覧注意】一度見始めると止められなくなってしまうgifアニメーション この記事をRTする 3. ネタ：【観覧注意】激安・格安・爆安ホームページ制作屋さんのサイト。体に悪影響を及ぼしかねないすさまじいデザイン、配色。キャッチフレーズは「ホームページ作ってあげます」 この記事をRTする 4. 「え？」思わず聞き返
ユーザーの疑問を素早く解決するためのWebサイト設計
2017年6月29日 Webサイト制作, ユーザビリティ サービス系・企業系Webサイトでよく見かけるサポート関連のコンテンツ。問い合わせをせず、自己解決を望むユーザーが増加し、よりよいサポートページの作成が必要となってきています。ユーザーが抱える疑問を積極的に解消するWebサイトを作成し、問い合わせ数を減らせば、ユーザー・企業側ともに手間を省くことができます。また、Webサイト内だけで解決できなかった疑問も素早く対処する事でユーザーのストレスを軽減することができます。そこに注目し、どのようにWebサイトを設計していくのかを考えてみました。 ↑私が10年以上利用している会計ソフト！ 問い合わせを未然に防ぐ サービス関連のWebサイトでは、同じような質問を何度も受ける事が多いです。そのような質問にひとつずつ回答していくのは非常に非効率。どのような問い合わせを受けやすいのかを的確に理解し、ユー
インターネットの世界を変えた24人
2013年3月23日 Web関連記事 新聞の代わりにニュースサイトを読み、手紙の代わりにEメールを送る…インターネットの世界は日々めまぐるしく進化しています。その中でもインターネットに革命を起こしたともいえる24人を紹介します。彼らの歴史は興味深いものばかりです。ぜひWikipediaと合わせて読んでみてください！ ↑私が10年以上利用している会計ソフト！ インターネットの父 ヴィントン・サーフ／ロバート・カーン 「インターネットの父」と呼ばれるヴィントン・サーフ氏とロバート・カーン氏は、インターネットのデータ転送技術の基盤となっているTCP/IPプロトコルを開発し、インターネットの創生に重要な役割を演じました。サーフ氏は聴覚障害者であり、聴覚障害者のための大学であるギャローデット大学の評議会のメンバーでもあります。カーン氏は世界初のパケット通信ネットワークであるアーパネットの詳細設計全体
CSS3とjQueryでフォームを美しく装飾する方法
2014年8月22日 CSS, jQuery どんなWebサイトでも設置されているフォーム。なんの装飾もなく味気ないフォームより、デザインされたもののほうが連絡してみたくなるはずです！そんなフォームも少し手を加えるだけで素敵なデザインに変身させることができます。今回はCSS3とjQueryを使ってより美しいフォームを作成する方法を紹介します。 ↑私が10年以上利用している会計ソフト！ フォームの仕様 今回チャレンジするフォームの主な仕様です！ グラデーション・ボックスシャドウを使って立体感を表現 角丸で丸みをつける（モダンブラウザ） 対応ブラウザ: IE7△, IE8△, IE9, Firefox, Chrome, Safari フォーム制作の流れ CSS3ってなんだ？という人もひとつひとつ記述していけば意外と簡単に作れるはずです！リンクをクリックで各項目にジャンプします。 テキストボック
スタッフ紹介ページをうまく活用している企業サイト
2017年6月29日 Webデザイン みなさんが今働いている会社に就職する前、その会社のどのページを参考にしましたか？多くの方が企業紹介のページを参考にしたはずです。その中でも実際に働いている人の紹介ページもあったら、その会社についてもっとイメージが湧きますよね。今回はそんなスタッフ紹介ページに注目してみようと思います！ ↑私が10年以上利用している会計ソフト！ スタッフ紹介ページの必要性 企業サイトが一番伝えたいのは「この会社はどんな事をしているのか」という点だと思います。そのためほとんどの企業サイトに「この会社について」などの企業紹介ページを設置しています。しかし企業の経歴や代表者の挨拶だけで、本当にその会社の説明ができるでしょうか？ 最近デザイン系のWebサイトをはじめ、企業サイトでもスタッフの紹介を掲載するページが増えてきました。どんな人がこの会社をつくっているのか？どのように製品
Webサイトの基本要素 見出し・リスト・引用文のスタイルを整える
2014年8月20日 CSS Webサイトを装飾していく時に無視できない要素、見出し・リスト・引用文。特にWordPressでオリジナルのテーマを作る時は、ブログ用にこれら基本の要素すべての装飾もすると思います。そんな時に使うコードのバリエーションをメモしていたので記事にしました。少し変えるだけで応用できると思うので、ぜひ使ってみてください！ ↑私が10年以上利用している会計ソフト！ 色、フォント、サイズなどを変えるだけで、どんなサイトでも使える見出し・リスト・引用文用のHTMLとCSSコードを紹介します。そのままコピペして使っちゃってください。少しはコーディングの手間が省ける…かもしれません。ちょいちょい使っている画像も保存して使ってもらってもOKです :) サンプル画面内の「HTML」「CSS」タブをクリックでコードが表示されます。IE6, 7, 8, FF, Chrome, Safa
ECサイトの色やデザインと購買意欲の関係 | Webクリエイターボックス
色と消費者 色はデザインの重要な要素のひとつです。しかし、全世界において共通しているとは言えません。北アメリカで注目されやすい色がインドでも同じとは限りませんよね。下記は北アメリカのオンライン消費者への色の働きです。 黄色 楽観的・若々しさ。ウィンドウショッピングをしている人の注意を集めるために使われます。 赤 エネルギッシュ。心拍数を高める色。緊急性があり、セール中の商品に使われます。 青 信頼と安全の色。銀行や企業のメインカラーとして使われます。 緑 裕福・リラックスを連想させる色。目に優しく、一連のプロセスを容易に見せます。 オレンジ 活発・活動的な色。「購入する」「購読する」などのCTAボタンに使われる事が多いです。 ピンク ロマンチック・女性的な色。若い女の子や女性に向けたECサイトで使われます。 黒 パワフル・滑らか・光沢など。高級な商品を扱うサイトで使われます。 紫 落ち着き
デッサン力とWebデザイン
2017年6月29日 Webデザイン Webデザインをやるのにデッサンなんて必要あるの？そう思っている人も多いと思います。確かにPhotoshopを使えば写真を手書き風に加工したり、イラスト風にすることも可能です。アイコンだって商用で使えるアイコンはたくさん出まわっていますね。それでも私は「デッサン力は必須ではない」けれど「あった方が絶対にいい」と思っています。そんなデッサンについて書いてみます。 ↑私が10年以上利用している会計ソフト！ アンケート結果 [poll id=”2″ type=”result”] こっそり行ったアンケート第二弾！一位は「自信はないけど描ける」という答えでした。２位以下は近差でしたが、「無理！」という人が一番少ないですね。この答えからも見えてくるデッサン力の必要性。あれ、そもそもデッサンってなんなんでしょ？ デッサンとは デッサンとは、目で見た物体の形状や質感、
印象に残る名刺の作り方
2013年12月25日 インスピレーション, 名刺 みなさんはどんな名刺をお持ちですか？またはどんな名刺に目を奪われますか？今働いている会社の名刺ではなく、個人の名刺を作ってみたくないですか？どうせ持つならインパクトのあるものがいいですよね！最初の印象をグッとよくする名刺の作り方がWeb Designer Depotで紹介されていたので意訳してみます！ ↑私が10年以上利用している会計ソフト！ Webデザイナー・デベロッパーとして、私たちは紙媒体を利用したマーケティングを見落としがちです。しかし、会議などクライアントと面と向かって会う場合や今後一諸にビジネスをするかもしれない誰かと出会ったとき、印刷物は非常に役に立ちます。名刺を持つことはあなた自身をオフラインの世界で宣伝するとてもいい方法です。 もちろんWebデザインは創造的な分野であるので、名刺にポートフォリオのような、自分のスキルを見
時間の節約になるWeb制作関連ツール 12+1
2013年4月2日 便利ツール Webサイトを作る際に、じっくり時間をかけたい作業とそうでないものがあると思います。細かい作業は便利なツールで作業時間の短縮をして効率よくすすめましょう！今回は私がいつも使っているものとSMASHING MAGAZINEで紹介されていて「おぉっ！」と思ったWeb制作に関する便利ツールを紹介します。 ↑私が10年以上利用している会計ソフト！ Photoshopテンプレート まずは私Mana作のPhotoshop用テンプレート。グリッドなんぞ入れてます。グレーのエリアがファーストビュー。結構昔に作ってずっと使ってる感じです。 » Photoshopテンプレートをダウンロードする Instant Blueprint http://instantblueprint.com/ Webサイトを作る際の最初のステップを楽にしてくれるサイト。CSS, images, JSな
「ルール」を打ち破るWebデザイン
2017年6月29日 Webデザイン Webデザインの「ルール」。そのいくつかを聞いたことがあると思います。でも「やってはいけない」「やらなければいけない」なんて聞いたら壊したくなるのが人間というもの（私だけ？）。今回はそんなWebデザインのルールを打ち破る素敵なサイトをNoupeで紹介されていたので翻訳してみます。次回のWebデザインの参考にしてみてください。 ↑私が10年以上利用している会計ソフト！ Webデザインの「ルール」に関する記事を見た事があると思います。事実、いやになるほど頭にインプットされている事でしょう。そして多くの場合その「ルール」は楽に生活を送るためのガイドラインとして役立っています。 しかし、あなたのアイデアがそのルールに当てはまらない場合、またはあなたがとにかく全てを型に当てはめるのにうんざりして、自分の創造力に挑戦したい場合はどうでしょう？そのルールは本当に変更
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
