サイトデザインをする上で、デザインがワンパターンになったり、煮詰まったりすると思います。そんな時、Instagram を使わない手はありません世界中のインスピレーション溢れるアート系の発信やデザイン系のイメージがたくさん参照できます本記事ではデザインのヒントになること間違いなしの海外のアートデザイン系の Instagram アカウントをご紹介します。
副業でWebデザインをやりたい人はいつの時代も多くいます。人気の理由は身近で、パソコンさえあれば自宅でできるという敷居の低さでしょう。特に、副業でWebデザインをやりたい方は女性が多い傾向にあります。 やり方次第では独立なんかもできるという期待もあるのだと思います。副業でWebデザインは大きく稼げるとは言えませんが、数万円や数十万円程度なら十分に稼ぐことはできます。 例えば、副業でもWebデザインの案件を1ヶ月に1本客単価10万円のをコンスタントにとっていれば結構な副収入になります。 しかし、当然それまでにはそれだけの実力や実績は必要になってきます。そこで、副業でWebデザインをして稼いでいくまでの実際の「準備」「手法」「必須ツール」の流れをここで紹介したいと思います。 3つ例を出してみましたが、だいたいこの3つぐらいの段階に別れると思います。下にいく程、本気度が高くなっています。 で、も
15 essential Sass mixins 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。 Sassやってみたい、と考えてる人には下記の本をオススメします。 Sassの初心者からもっと使いこなしたい人まで、Sassを確実にマスターできるオススメの本 -Sassの教科書 box-sizing(ボックスサイズ) opacity(不透明度) column-width(カラム幅) circle(円形) font-size(フォントサイズ) box-shadow(ボックスシャドウ) xPos(要素の座標) vertical-align(天地の中央に配置) flexbox(フレックスボックス) flex(モダンブラウザの旧仕様にも対応したflexの指定) flex-order(表示の順番) flex-direction(表示の方向) gra
様々な画面サイズにワンソースで対応するレスポンシブWebデザインは、多くのサイトで使用されていますが、HTMLメールをレスポンシブ対応するにはどうしたらいいのでしょうか? Webサイトの場合、ブラウザで表示しますが、メールは、メーラーで表示します。メーラーは、CSSのサポート対応状況がブラウザと異なる為、従来のレスポンシブWebデザインのテクニックをそのまま流用する事は出来ません。 では、どのようにHTMLメールをレスポンシブ対応させるのか、その方法のひとつをご紹介いたします。 HTMLメールをレスポンシブ対応させる方法 まず、HTMLメール制作の基本的なポイントは「HTMLメールの制作時に気をつけたい9つのポイント | コリス」でご確認いただければと思います。 主要メーラーごとのCSSサポート状況を「Guide to CSS support in email | Campaign Mon
最近見かけるようになった背景にCanvasで描いた粒子でできたような幾何学状のアニメーションを簡単に実装できる超軽量スクリプトを紹介します。 ↓は静止キャプチャですが、優美なアニメーションで動きます。 Demo: Elegant particles.jsの使い方 Step 1: 外部ファイル 当スクリプトを外部ファイルとして記述します。 <body> ... コンテンツ ... <script src="http://vincentgarreau.com/particles.js/particles.js"></script> </body> Step 2: HTML コンテンツの一番下あたりに、粒子の元となる空divを用意します。 <body> ... コンテンツ ... <div id="particles-js"></div> <script src="http://vincentg
いくらWebサイトの良しあしを外部からほめられたとしても、お客様にとってわかりにくければ何の意味もない。 文章がいくら正しく書かれていても、お客様に伝わらなければ意味がない。 そう話すのは、ソニーが15年前に損害保険業界に参入し設立した「ソニー損保」のコンテンツ企画部長の片岡 伸浩氏。ダイレクト販売を旗印に保険業界に参入する企業として「企業のためでなく、お客様のための保険会社」だというメッセージを伝える必要がありました。そこで、今回はそのメッセージを伝えるために、ウェブを通じてどのような取り組みを行っているか片岡さんに伺いました。 コンテンツ企画部で作った行動指針「わかりやすさのその先へ」保険という商品はもともと複雑な商品で、お客様がすべてを理解したうえで契約しようとすると、かなり広範囲な知識が必要となります。お客様にとっては、「難しい」と思われてしまう商品かもしれません。言い方を変えれば
「モバイルファーストからコンテンツファーストへ」レスポンシブWebデザイン専門家が語る、コンテンツの捉え方 2014.11.11 火 モバイル端末の種類が増えた昨今、コンテンツはまずモバイルに合わせて作るべきというモバイルファーストという考え方。その本質はコンテンツファーストだ、と語るのがレスポンシブWebデザインの専門家である菊池崇氏。このコンテンツファーストについて詳しく聞きました。 関連する過去記事 コンテンツストラテジスト必見!レスポンシブWebデザインがアツい理由 レスポンシブWebデザインのワークフロー、デザイニングインブラウザとは レスポンシブWebデザインを語る上で欠かせない!コンテンツストラテジストが知っておくべき「HTML5」のポイント 今回は、レスポンシブWebデザインについて学ぼうとすると頻出するキーワード「モバイルファースト」を起点に、その根底にある概念「コンテン
単語を入力するだけでイメージにぴったりな画像を提示してくれ好きなカラーを直感的に探し出してカラーパレットやカラーコードを表示してくれるネットサービスが「Colores」です。 Colores http://colores.manugarri.com/ これがColoresのトップページ。単語を入力するテキストボックスがあるだけという超シンプルなデザインです。 例えば「tree(木)」と入力するとこんな感じでカラーパレットやイメージ画像をずらりと表示してくれます。 単語にぴったりの画像と、その画像に使われている主な色がカラーコード付で表示されるので、イメージにあうカラーコードをすぐに調べられるというわけです。 また、イメージに合うカラーパレットは正方形や…… 長方形で表示されるので、これをクリックすると…… Dribbbleというデザイナーのコミュニティサービスにジャンプ。入力した単語にぴっ
2014年11月5日(水)、早稲田大学公式サイトが、株式会社CINRAの手により、見事なリニューアルを遂げました。 プレスリリースに書かれた彼らの目論見通り、「国内外の大学と一線を画す、最新のグローバルサイト」と言えると思いますが、なぜ、国内屈指の大規模校である早稲田の公式が、ここまで個性的なサイトになっていると感じるのでしょうか。 日々大学サイトの構築に向き合うWebディレクターの立場から、その「スゴイ」理由を、少し考えてみました。 1 – 「メディアサイト」として尖らせたから 一般的に大学サイトは、ある程度メニュー内容も共通化され、情報公開に重きを置いた「ポータルサイト」として位置づけられることが多いと思います。 しかし、新しい早稲田のサイトは、細かいコンテンツは「別サイト」に任せ、新着記事とリンク集で構成される「メディアサイト」に大きく振ってきました。 海外大学サイトでは「News」
Googleが提唱しているフラットUIを発展させたデザインがマテリアルデザインです。アイコンを単純化して情報構造を明確にするだけでなく、さらにマウスオーバーやタップ時のアニメーション、色の変化をつけることでシステムがどういう状態にいるかが明確になります。 そんなマテリアルデザインにフォーカスして作られたアイコン集がMaterial Iconsです。 Material Iconsの使い方 Material Iconsは数百種類のアイコンが提供されています。 アクション系。 特徴としては一つのアイコンで終わりではなく、その状態によって斜線を引いたり、アイコンを重ねたアイコンがあることでしょう。 アラート、AV、コミュニケーション。 音量アイコン一つとっても、音量の大小、ミュート、設定不可などとパターンが作られています。 コンテンツとデバイス。 スマートフォンでも利用も想定されていますのでデバイ
Earlier this year, we collaborated with our friends at @Iconfactory on a set of 872 beautiful emojis so Tweets containing emoji characters would look as sharp on the web as they do in mobile apps. Now we’re pleased to announce that these emoji are available as an open source library to the developer community at large. Since we’ve gotten many requests to use our emoji in various projects, as of to
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く