在宅ワークの集中力を高めよう！環境音が聴ける作業BGM用Webサイト
在宅ワークの集中力を高めよう！環境音が聴ける作業BGM用Webサイトこのご時世、自宅でお仕事をしている人も多いかと思います。私はもう長い間在宅ワークなので慣れっこですが、在宅ワークを始めたばかりの人だと集中力の維持がひとつの課題になりますね。まったく音がない場所よりも適度にノイズがあったほうが集中しやすい環境なのだとか。そこで今回は自然の音や街の環境音、生活音などをまとめたWebサイトをいくつか紹介します。 I Miss the Office「自宅勤務やったー！」と思っていても、そろそろオフィスが恋しくなってきた人もいるのでは？I Miss the Officeはオフィスの環境音を流せる Web サイト。人が話す声や歩く音など、オフィス内でよくある音を再現しています。画面右下の数字はオフィス内の人数を表していて、好みに合わせて増減可能。画面左下のスタートボタンから音が流れます。家具をクリッ
CSS Gridを使ったレスポンシブ対応の基本レイアウト
CSS Gridを使ったレスポンシブ対応の基本レイアウト以前「CSSグリッドレイアウトで、サイズが違う複数のボックスをタイル状に配置する」という記事で紹介したCSSグリッドレイアウト。皆さん使っていますか？前回はちょっと複雑なレイアウトに挑戦しましたが、今回はCSSグリッドを使った基本的な2カラム・3カラム・カードスタイルのマルチカラムレイアウトの作り方を紹介します！ 基本的な記述方法は動画でも紹介しています。初めて CSS グリッドに挑戦するよという方はまずはこちらで基礎を覚えておきましょう！ 2 カラムまずは基本の 2 カラム。CSS グリッドのいいところは、横並びの指定や各ブロックの幅、余白をひとつのセレクターに対して指定すればいいという点ですね。どのように記述していくか見てみましょう！ 可変幅 2 カラムカラムを画面の幅に合わせて伸縮させるには、CSS グリッドで使える fr とい
Webデザインを「もっとかっこよくして！」と言われた時に試したいCSS小技5つ
Webデザインを「もっとかっこよくして！」と言われた時に試したいCSS小技5つWebデザイン・制作を教えている時に、担当していた生徒さんからこんな悲痛なメッセージをいただきました。「Webサイトのデザインを出してみたものの、本気を出して作ってくださいと言われてしまいました…」。デザインを見てみると、とても美しく整ったものだったのですが、「テンプレートとしてありがち」なレイアウトに見えました。この辺を指摘されたのかな、と。自分でコーディングをすることを考えると、どうしても自分の力で実現できそうなデザインにしてしまうんですね。私も駆け出しの頃はよくありました。そこで今回はちょっとした工夫で少し差がつくCSSの小技をいくつか紹介します。簡単にできるとわかれば、デザインに反映できそうですね！ 1. 要素を斜めに配置通常 CSS でレイアウトを組んでいくと、垂直平行のボックスが並んでいくことになりま
生まれ変わったDreamweaver CC 2017をいじってみた！Codaから出戻る…かも…
2016年11月7日 便利ツール 数日前Adobeのエディターツール、Dreamweaver CC 2017が新機能とともにリリースされました。過去にDreamweaverからCodaに乗り換えた私ですが、苦楽をともにしてきたCodaさんがどうもアップデートのたびにプラグインがうまく動かないなど、使いづらくなってきて…。そんな時に新生Dreamweaverの情報を耳にしたので、さっそく試してみました。 ↑私が10年以上利用している会計ソフト！ Dreamweaver CC 2017をインストール Adobeのツールはサブスクリプションモデルなので、Creative Cloudに契約する必要があります。Photoshop CCやIllustrator CCなど、多彩なAdobeツールが使い放題のコンプリートプラン（月額4,980円）、Dreamweaverのみ利用できる単体プラン（月額2,1
WordPressで会員制サイトを作れる無料プラグイン「Simple Membership」
2015年10月2日 Wordpress 会員登録をしたユーザー限定でコンテンツを表示する会員制サイト。作るには時間や手間がかかるイメージですよね。今回はそんな会員制サイトを簡単に、そして無料で作れちゃう「Simple Membership」というプラグインをご紹介します。 ↑私が10年以上利用している会計ソフト！ 会員制サイトに必要な機能 以下の機能のついた簡単な会員制サイトを作ってみようと思います。 新規ユーザー登録 ログインフォームの設置 記事やページを限定公開 ユーザーによる登録情報（名前やパスワード等）の変更 管理ページから手動でユーザー追加 Simple Membershipは無料で使えるWordPressの会員システム導入プラグイン。会員レベルの設定やコンテンツの限定公開も簡単で、ショートコードを使ってログインフォームも設置できますよ。細かい設定は難しいかもしれませんが、上記
CSSの content プロパティーを使いこなそう！
CSSの content プロパティーを使いこなそう！CSSの小技やスニペット集なんかを見ていると、ちょくちょく見かける content プロパティー。「そういえば、こいつ一体何者…！？」と思った方もいるかもしれないので、今更ながら改めて content プロパティーの紹介をしようと思います。 content プロパティーって何？content プロパティーは、要素の前後に、:before または :after という擬似要素を使ってテキストや画像などのコンテンツを挿入する際に使用します。擬似要素とは、HTML などの文書には記述されていない要素を CSS によって新たに作り出された架空の要素です。Web クリエイターボックスでも、過去記事「かつては JavaScript を利用していたものの、今では CSS のみで実装できる 10 の小技」や「経歴や会社の沿革ページに！簡単な CSS で
かつてはJavaScriptを利用していたものの、今ではCSSのみで実装できる10の小技
かつてはJavaScriptを利用していたものの、今ではCSSのみで実装できる10の小技2011年に「少しのコードで実装可能な20のjQuery小技集」という記事で数々の便利な制作技を紹介したのですが、時は流れ、今ではCSSのみで表現できるものが多くなってきました。という事で今回はその記事内で紹介した技を中心に、かつてはJavaScriptを利用していたものの、今ではCSSのみで実装できる小技を紹介します。 少しのコードで実装可能な 20 の jQuery 小技集 目次Div 全体をクリックできるようにするテーブルの偶数・奇数の行の色を変えるフォームにテキストを入れておき、フォーカスで消す（文字色も変更）ラジオボタンとチェックボックスを装飾するスライドパネルアコーディオンツールチップ言語によってスタイルを変更横並びの div の高さ揃えるボックスを上下左右中央に配置するそれでは実際にどんな
Flexboxで決まり！ | Webクリエイターボックス
これからのCSSレイアウトはFlexboxで決まり！FlexboxとはFlexible Box Layout Moduleのことで、その名の通りフレキシブルで簡単にレイアウトが組めちゃう素敵ボックスです。前々からあった技術ですが、ブラウザーによって書き方が違ったり、仕様がころころ変わったりと、イマイチ一歩踏み出せない感があったFlexbox。しかしようやくモダンブラウザーでの利用に難がなくなり、実務にも充分使えるようになりました。今回はそんなFlexboxの魅力と使いドコロを、デモ付きで紹介していこうと思います！ 対応ブラウザーCan I use…で紹介されているように、現行のモダンブラウザーでは問題なく利用できます。ただし、Safari 用に -webkit- のベンダープレフィックスが必要です。IE については 11 から正式に対応。IE10 にも対応していますが、書き方が少し変わって
タスク自動化ツール「gulp」 を使って制作時間を短縮しよう
2014年12月24日 Webサイト制作, 便利ツール みなさん、タスクランナーを使っていますか？タスクランナーとはファイルの圧縮やSassのコンパイルなんかを、ファイルを保存したと同時に自動で行なってくれる素敵ツールです。制作のスピードアップも間違いなし！今回はそんなタスク自動化ツールのひとつ、gulpを紹介します。 ↑私が10年以上利用している会計ソフト！ gulpとは gulpとは、Node.jsを使ったタスク自動化ツールです。CSSやJavaScriptファイルの圧縮や結合、Sassのコンパイルなんかも自動化できるので、「フロントエンドしかいじらないよ！」というWebデザイナーさんでも、使えるようになると作業がかなりはかどりますよ。一度gulpでプロジェクトファイルを作成しておくと、自動化の手順を他の人と共有できるので、チームで開発する時にも力を発揮してくれます！ Gruntとの違
少しのコードで実装可能な20のWordPress小技集
少しのコードで実装可能な20のWordPress小技集CSSの小技やjQueryの小技、スマートフォン対応など、これまで様々な小技集を紹介してきました。そこで今回はWordPressの小技を紹介しようと思います！基本から応用まで、簡単なコードで設置可能なので、WordPress初心者さんでも大丈夫！みなさんのサイトに合わせてカスタマイズしてくださいね！ 1. カスタムメニューの設置カスタムメニューを使えるように設定しておくと、管理画面からドラッグ＆ドロップでメニューの追加や配置変更ができてとっても便利。私の場合必ず利用する機能のひとつです。 まずは functions.php に以下のコードを追加して、カスタムメニューを使えるようにします。functions.php がテーマフォルダ内にない場合は新規作成してください。 add_theme_support( 'menus' ); 続いて管理
アクセシビリティを考えたドロップダウンメニューを実装する | Webクリエイターボックス
アクセシビリティを考えたドロップダウンメニューを実装する多くのWebサイトに設置されているドロップダウンメニュー。うまくカテゴリー分けされていれば非常にわかりやすく、スペースも取らないので制作側からも愛されていますね。しかしアクセシビリティの観点から考えると、ちょっとやっかいな存在ではあります。マウスがうまく利用できないユーザーはキーボードを使ってページやリンクを移動しますが、ドロップダウンメニューは `tab` キーを使ってもサブメニューが表示されないのです。今回はこの問題を解決しようと思います！ こちらの Gif 画像のように、カーソルではなくキーボードの tab キーを使ってリンクを推移できるようにします。通常の HTML と CSS を使った設置方法だと隠されている子メニューが表示されないので、キーボード操作でもうまく表示するのが今回の目標です。ちなみにこのブログのナビゲーションメ
レストラン等、飲食店Webサイトの制作Tipsと実例まとめ
レストラン等、飲食店Webサイトの制作Tipsと実例まとめレストラン、居酒屋、カフェ、バーなどなど、国内だけでも数えきれないほどの飲食店が存在します。そのため、飲食店のWebサイト制作を経験したことのある、またはこれから制作予定のデザイナーさんも多いのではないでしょうか？そこで今回は特にレストランにスポットをあてて、必要な要素や制作ポイントを考えてみようと思います。 おいしそうな写真が命！ユーザーがお店に入る前にチェックしておきたいのは、そのお店でどんな体験ができるのか？という事。どんな料理が出てくるんだろう？一皿頼んだらどれくらいの量なんだろう？お店の雰囲気は？などなど…。これらの不安を解消してくれるのがクオリティの高い写真です。最近ではファーストビューで画面いっぱいの写真を背景画像としてドドーンと表示しているサイトもよく見かけますね。 鉄板焼きの可らしでは写真ではなく、調理中の動画を表
Webデザイナーの私がブログを書き続ける理由 | Webクリエイターボックス
Webデザイナーの私がブログを書き続ける理由先月、『海外でWebクリエイターとして働くには？』対談セミナーが無事終了しました。私自身初のセミナーだったので、かなり緊張したのですが…多くの方に来ていただき、感謝感謝です。セミナーでは海外でのWeb関連のお仕事事情や留学情報がメインテーマだったのですが、ブログ運営についても少しお話しました。残念ながら時間の都合上すべてを語りつくせなかったので、補足も兼ねてブログをすることのメリットを記事にしようと思います。 ブログを始めたきっかけ2009 年、夏。バンクーバーのとあるカフェで、同じく駆け出しであった日本人 Web デザイナーの友人に WordPress のオリジナルテーマの作り方を教えていました。彼曰く WordPress に関する記事は当時英語で書かれたものばかりで、日本語で詳しく書かれたサイトがあまりなかったようです。「海外に住んでるんだし
かわいい系デザインに使えるフォントや素材、デザインアイデアを集めました
かわいい系デザインに使えるフォントや素材、デザインアイデアを集めました女性Webデザイナーにとっては「かわいいと言えばこんな感じ！」という基本的な概念が自然と身についているものの、男性デザイナーにとってはなかなか難しい女性テイストのデザイン。でも大丈夫！今回紹介する無料素材やフォント・配色例を組み合わせれば、きっと女子力の高いかわいいデザインができあがるはずです！紹介する素材はすべて商用利用OK！参考になるデザインのWebサイトもいくつか紹介します！ （あ、ちなみによく誤解されますが、私、Web クリエイターボックスの中の人は女です w） 無料フォント曲線をうまく使うと女性らしいデザインに仕上がります。そこで、使用するフォントはまるっこいものや女性の手書き風にすると、かわいらしさがググッとアップします！紹介するフォントはすべて商用利用 OK です（但し書きのあるサイトについては、以下にその
アイコンフォントからSVGへ！より手軽にベクター画像を表示しよう
2014年7月3日 SVG ベクター画像を表示する際とっても便利なSVG。名前を聞いたことのある方も多いのではないでしょうか？SVG自体は10年以上前から存在するのですが、HTML5の普及とともに多くのブラウザーでサポートされるようになり、今年に入ってから徐々に見かける機会が増えてきました。今回はそんなSVGにフォーカスしようと思います。 ↑私が10年以上利用している会計ソフト！ 2014年7月3日 追記：SVGスプライトの書き方について修正＆追記しました。 SVGってなに？ SVG（Scalable Vector Graphics）はIllustratorで作成したようなベクター画像を表示する技術です。Web上で一般的に使われる画像形式であるJPEGやPNGなどのビットマップ形式とは違い、ベクター形式の画像は、拡大縮小しても画質が劣化しません。 Appleがレティナディスプレイを発表して
新規顧客を逃さないECサイトデザイン
新規顧客を逃さないECサイトデザインECサイトの構造はとっても複雑。ユーザーは好みの商品を検索し、その中から実際に購入するものを比較・検討・選択、さらにフォームに入力するというプロセスを経て、ようやく購入完了となります。オンラインショッピングに慣れている私でも、新規サイトでは苦労することが多いです。そこで使いやすいECサイト、特に新規客に優しいサイトデザインとはどんなものなのか、考えてみました。 目的の商品ヘ素早くアクセスEC サイトはスピード勝負だとよく言われています。それはページの読み込み時間という体感速度はもちろんですが、いかに簡単に目的のページに到達できるかも大切です。特に何が欲しいのか決まっているというユーザー層は、急いでいるわけではありませんが、そのサイトに長居するつもりはありません。目的の商品を素早く表示するのはもちろん、色や型などが一致しているかどうかを判別しやすくするため
WordPressのカスタム投稿タイプでメンバー紹介ページを作成
WordPressのカスタム投稿タイプでメンバー紹介ページを作成先日公開したFrogのサイトは例のごとくWordPressを使って制作しました。ブログで使う「投稿」や、その他の「ページ」とは区別して、これからも増えていくであろうチームメンバーの一覧＆詳細ページを、カスタム投稿タイプという機能を使って作成したので手順を公開。企業サイトに従業員一覧ページを用意しているところも多いと思うので、参考になれば幸いです。 Frog のサイト 目標 - こんなページを作りますFrog のチームメンバーページを実例として紹介します。カスタム投稿タイプを設定するための WordPress プラグインもありますが、今回はプラグインを使わず設定。プラグインを使わなくても意外と簡単に設定できますよ :) チームメンバー一覧ページ チームメンバー個別ページ 以下の要素を表示します。 名前職業顔写真SNS リンク概要
経歴や会社の沿革ページに！簡単なCSSで実装するタイムライン
経歴や会社の沿革ページに！簡単なCSSで実装するタイムラインちょうど今作っているサイトで、経歴をタイムラインで表現するページがあったのでコードを紹介。コード自体はとってもシンプルなので、カスタマイズ次第でどんなデザインのサイトにもあわせられると思います。文章にするとゴチャゴチャしがちな経歴・沿革をスッキリと表示しましょう！ モバイルファーストってことで、640px 未満の幅のデバイスには年月・見出し・詳細文章を順に表示します。 モバイル版はこんな感じ。サンプルページの画面の幅を調整して比較してください。 HTMLtimeline というクラスのついたリストの中の li タグで項目を追加していきます。 <ul class="timeline"> <li> <p class="timeline-date">2007年2月</p> <div class="timeline-content"> <
IllustratorでのWebデザインがいい感じ！おすすめポイントや設定いろいろ
IllustratorでのWebデザインがいい感じ！おすすめポイントや設定いろいろこれまでは「WebデザインといえばPhotoshop」というのが通例でした。しかしIllustratorもWeb制作の環境に適応されてきた今、フラットデザインやイラストを多く扱うWebサイトでは断然Illustratorをおすすめします！今回はあまり知られていないIllustratorとWebデザインの相性や、Webデザイン用の設定方法等をご紹介します。 Illustrator 初心者さんへIllustratorはベクター形式の画像を作成できる Adobe 社のアプリです。ロゴやイラストを作る時にはかかせません。Adobe の公式チュートリアルサイト、Adobe TV では Illustrator の概要やチュートリアルをはじめ、新しい機能の紹介も随時追加されています。 Illustrator は月額 3,2
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
2016年上半期に読んだWeb・デザイン関連の本
