最近のWebページで人気のある縦長ページ、CSS3アニメーション、スクロールエフェクト、大きい写真画像を使った背景、カードコンポーネントなど、UIデザインのトレンドを取り入れたBootstrapのテーマを紹介します。 Bootstrap 4ベースのものもリリースされ始めました。
あれ?フォトショいらなくない?意外なほど優秀なパワポの画像加工・切り抜き機能 画像の加工といえばPhotoshop!で、まぁ間違いは無いんですが、やっぱ重いんですよね。 で、意外と知られていないのが『PowerPointの画像加工機能が結構なレベルまでパワーアップしている』という事実。ちょっとした加工ならパワポにお任せ!だったりするんですよ実は。(※PowerPoint2010以降推奨) 背景透過で邪魔な要素をキレイにカット 2つの画像やイラストを重ねた際に、余白や背景が邪魔!という場合も、PowerPointで簡単に消すことができます。 背景を透過させたい図を選択したら、図ツール>書式タブを開く 調整>色を選択したら、表示メニューから「透明色を指定」を選択する 透明にしたい部分をクリックする ※このとき、透明にする色は一色のみ指定可能です。 PowerPoint2010以降ならもっと細か
2014年6月にGoogleマテリアルデザインガイドラインが公開されてから、AndroidはもとよりiOSのアプリでも、このガイドラインを取り入れたUI/UXの優れた作品が多数出てきました。 今回はそんな相変わらずトレンディなマテリアルデザインのガイドラインをわかりやすく、ポイントを絞ってお伝えします。 目次 マテリアルデザインとは? 平面なのに3D 紙とインク マテリアルデザインのカラー グリッドシステム アニメーション 心地の良い動き タッチフィードバック 意味を持ったアニメーション まとめ マテリアルデザインとは? マテリアルデザインを直訳すると「物質的なデザイン」という意味です。 デジタルのデザインなのにどの辺が「物質的」なのか、それは次の2つの概念で表現されています。 平面なのに3D マテリアルデザインでは、要素の重なりを物理的にとらえ、平面の中に、明確なZ軸の概念を持たせていま
2015年の上半期を振り返る 今回は普段と少し趣向を変えて、2015年の上半期を振り返りながら、私が驚かされたものや感激したものを中心に厳選してご紹介します。 基本的に紹介するのは WebGL 総本山で取り上げたものに限定しますが、紹介した際の記事へのリンクや画像、その他ふんだんに使いつつ紹介していこうと思います。当該記事を見落としてしまった人も、気になるものを見つけたらぜひチェックしてみてくださいね。 アート・デモ・プロモーション部門(全 12 作品) 日本の作品部門(全 8 作品) アカデミック部門(全 6 作品) ビジュアライズ部門(全 6 作品) アート・デモ・プロモーション作品部門 OFFF - Skazka OFFF 2015 のために制作された WebGL デモ Skazka! 動的なポリゴン生成など見どころ満載!! びっくり度数:★★★☆☆ この作品のすごいところは、個人的
こんにちは!YOUKNOWです。 本日社内で話題になってた、CC 2015シリーズの中から、Dreamweaver(DW)のご紹介です。 いままでなんとなく他のエディタに比べると、遅れてた感が否めないdreamweaverさんですが、今回のアップデートで最前線に舞い戻りそうです。 今までの機能や新機能等、便利になりそうだなと思った所をピックアップしてご紹介しています! しかしadobeさんはbracketsも出しているけれど、両方頑張る感じなのかな..? Dreamweaver CC 2015での進化点あらゆる端末で同時にプレビューする、デバイスプレビュー機能 デバイスプレビュー機能 PCと表示を確認したい端末を同じwifiネットワーク内に入れ、Dreamweaverが表示するQRコードを読み込ませるか、指定のURLを手動で入力して接続する方法があります。 また、表示する端末の横幅等のメタ
これからWebデザインやコーディングの勉強を始めたい方、またはWebデザイナーになったばかりの方向けのまとめ記事です。 「無料で始められる…」とか「本を買わなくても…」などのテーマにしようか迷ったのですが、無料ではじめられる記事としては、既にネタ帳さんの以下のようなエントリ↓がありますので、ここでは純粋に私がおすすめしたい記事、本、サイト、ソフトなどを有料無料に関係なく紹介したいと思います。 Web制作の為の無料Webサービス・ツール40*ホームページを作る人のネタ帳 デザイナーからデザインの基礎や原則を学べるエントリーまとめ(webデザイナ向け)*ホームページを作る人のネタ帳 あと、渋谷でWebデザインスクールを開講しています。 詳しくはこちらの記事 をご覧下さい。 デザイン基礎 年末年始にWebデザインを学び直すための3つのステップ いきなり手前味噌で申し訳ないですが、これからWebデ
HTML5や、次々と台頭するJavaScriptフレームワークにみられるように、現在のフロントエンドは異常なほど動きがあります。 常にキャッチアップしていないと、いつのまにかOLDな技術を使い続けることになります。実際に今回記事にしてみて、ちょっとつらくなりました。。 しかし、フロントエンドエンジニアとしてコードを書いていて(最近は主にJavaScript)、そのおもしろさに日々驚いています。 そこで今回は、ここ数年~2015年のフロントエンド界隈で一度は流行った技術、今後の動向などをまとめました。タイトルにモダンとありますが、その辺は適当です。ぜひ一度整理してみてください。 目次 Javascriptフレームワーク React.js Angular.js Angular.js 2.0 Backbone.js Vue.js Mithril.js Aurelia.js Knockout.js
2024年4月1日より、Supership株式会社は親会社であるSupershipホールディングス株式会社に吸収合併されました。 合併に伴い、存続会社であるSupershipホールディングスは社名をSupershipに変更し、新たな経営体制を発足しました。本件に関する詳細は、プレスリリースをご確認ください。 2024年4月1日より、Supership株式会社は親会社であるSupershipホールディングス株式会社に吸収合併されました。 合併に伴い、存続会社であるSupershipホールディングスは社名をSupershipに変更し、新たな経営体制を発足しました。 本件に関する詳細は、プレスリリースをご確認ください。
これはもう何年も前から気になってることなのですが。 何故、昔からずっと見出し画像などの文字組みや文字詰めの甘いWebサイトが多いのでしょうか。 私はデザインについて偉そうに言える立場でないのは分かっていますが、折角全体的なデザインや背景、写真、Flashなどの動きはとても美しく、文章構成のしっかりしたサイトなのに、ただ一点文字詰めだけが甘いというサイトがあまりにも多くて、そういうサイトが減る様子もないのがずっと気になっています。 私は以前、ファッション雑誌やビジネス誌の組版(MacのInDesignやQuarkXPressを使って印刷用のデータを作る仕事。DTPとも言う)の仕事をしていて、見出しは言うまでもなく、本文の文字詰めが少し甘いだけでもものすごく怒られたものですが、Webデザインの世界ではそういうのはあまり怒られることがないのでしょうか。 私は、見出しやタイトル画像における文字組み
レイアウトパターンを配置する 基本的にWEBページには、ヘッダー、グローバルメニュー、コンテンツ、フッターの4要素が配置されています。 ヘッダーとフッターは、文字通りページの先頭と最後に存在する要素で、配置に悩む必要はありません。 まず最初に考えるのは、メニューの配置です。 メニューの配置 どのページからでも目的のページへすぐに辿り着けるようにメニューを配置することで、訪問者の満足度は上がります。 訪問者はホームページに情報を求めてやってきます。 肝心な情報までのルートが迷路になっていると、訪問者はストレスを感じて他のホームページへ移ってしまいます。 メニューの配置は「レイアウトを決める」でお話ししたように、商用デザインに倣ってレイアウトする事をお勧めします。 2分割T字型レイアウト、2分割I字型レイアウト、逆L字型レイアウトの3種類がメジャーなレイアウトです。 それぞれのレイアウトのメリ
WebクリエイターボックスのX: @webcreatorboxでは毎日Webに関する記事や美しいデザイン・写真などを紹介しています。その中で今週人気だったWeb関連の情報トップ10を紹介します。見逃してしまった人はこちらでチェック!まだフォローしてない人はお気軽にフォローしてみてくださいね! 続きを読む Web制作やデザインに関する情報は、インターネット上以外にも書籍を通して体系的に学ぶことができます。今月も様々な本を拝読しました。その中でいいなと思った物、オススメの物をいくつか紹介します。 続きを読む WebクリエイターボックスのX: @webcreatorboxでは毎日Webに関する記事や美しいデザイン・写真などを紹介しています。その中で今週人気だったWeb関連の情報トップ10を紹介します。見逃してしまった人はこちらでチェック!まだフォローしてない人はお気軽にフォローしてみてくださいね
先日ブログでご紹介した『パララックス効果』、おかげさまで非常に好評だったのですが、あまりにもいろんなサイトで採用されているのでそろそろ新鮮味に欠けてきました。私が個人的に好きでぜひ流行ってほしい、それにウェブ技術の文脈的にも次に来るんじゃないかと思っているウェブデザインの表現が『背景フルスクリーン動画』です。文字通り、ウェブサイトの背景が全画面の動画になっています。 アプリの使い方を背景動画で紹介する『Path』のウェブサイト 『Path』はフォローしあえる友人の数を150人までに制限しているクローズトなSNSアプリ。サイトを訪れるとアプリを操作するひとの手と、挙動するアプリの画面を動画で映しています。 男女の学生がひたすら歌いつづける芸大のウェブサイト 東京藝術大学大学院映像研究科 メディア映像専攻 年次成果発表会「Media Practice11-12」のサイトでは、同研究科所属と思わ
フォームは各ブラウザによってボタンの大きさやマージンの取り方など、千差万別です。私としては少しぐらいの差は気にならないタイプですが、デザイン的にフォームの大きさや位置が決まっていて揃えておかないとレイアウトが崩れるといった状況も出てくると思います。そういう時に参考になる書き方があるので紹介します。 CSS form { position: relative; margin: 0; padding: 0; width: 320px; height: 64px; background-color: #CCCCCC; } form p { position: absolute; top: 12px; left: 32px; margin: 0; padding: 0; width: 256px; height: 24px; } p .search { position: absolute; bo
二度目まして。デザイナーの野田です。 レスポンシブWebデザインについて、僕なりにまとめてみたのでご覧下さい。今回は、制作に関することではなく、最低限知っておかなければならないことの基本編になります。 独学でつまずいていませんか? Webデザインを効率的に学びたい、転職・就職を目指している、誰かに教えてもらいたい……という方は、「スクールでの勉強」もおすすめです。どんなスクールがあって、どんな内容が学べて、費用はどれくらいするのか、情報として持っておいて損はないはず。下記におすすめスクールを集めてみました! レスポンシブWebデザインとは 「レスポンシブWebデザイン」とは、PC、タブレット、スマートフォンなど、複数の異なる画面サイズをWebサイト表示の判断基準にし、ページのレイアウト・デザインを柔軟に調整することを指します。 現在はPCやスマートフォンなど、デバイス毎に各HTMLファイル
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く