Web制作の常識が変わる、便利な最新オンラインツール48個まとめ
この記事では、Webデザインやグラフィックデザインの制作スピードを短縮し、生産性をアップする、便利な最新オンラインツールをまとめてご紹介します。 「もっと早く知りたかった」と思わせる、面倒な作業をサクサクこなす時短ツールが勢揃いです。カテゴリごとに整理しているので、目的にあったお気に入りツールを探してみましょう。 コンテンツ目次 1. Web制作便利ツール 2. デザインコレクション 3. イラスト系ライブラリ 4. 配色ツール 5. プロトタイプツール 6. コラボ、リモートワークツール 7. 面白、クリエイティブツール Web制作の常識が変わる、便利な最新オンラインツールまとめ Web制作便利ツール The Hero Generator ウェブサイトの魅力的なヒーローイメージを作成できるオンラインツール。グラデーションオーバーレイやボタンスタイル、見出しタイトルの余白など細かい部分も手
意外と今っぽくなる、CSSやjQueryで実現するエフェクトまとめ
作成：2016/02/8 更新：2016/06/29 Web制作 > CSSやjQueryで実現する、今までにないようなエフェクトを実現するために知っておくと便利なエフェクトをまとめました。トレンドをおさえた最近のものを厳選してピックアップ。ファーストビューなどで、一味違った面白さを出したいときに。 エンジニア速報は Twitter の@commteで配信しています。 セグメンテッド コントロール pocketなどに見られる「リスト・タイルビュー」など表示形式の切り替え。コンテンツを切り替えるセグメンテッド コントロール（SegmentedControl）。少し古い記事ですが、他になさそうだったので。 Blueprint: View Mode Switch もうひとつはcodepenから。 See the Pen DropDown2Segment by ActiveCodex (@Acti
mixiの新人研修トレーニングが非常にわかりやすくて実践的すぎる - Android Javascript iOS
mixiは新人研修用のトレーニングをgithubに公開しています。 公開していることは知っていたけれど、いざみてみると… とってもわかりやすく実践的！！！ 普通に参考書で勉強するよりも企業が公開しているものだから、より実践的という感じもします。 自分はこのAndroidTrainingをやっているのですが、最後に課題もあり、到達度や理解度もすごく把握できていい感じです。 READMEもかなり充実しており、一通りを学べるように工夫されています。 mixiに入社した方がこれを一通りやったと思うと、大変な印象ですが…だからこそやったときに達成感がありそうです。 開発環境の構築から書かれているので、ほとんどつまづくことはありません。 かなり詳しくわかりやすく書かれている印象を受けました。 ちょっと初めて学習するには、難しい箇所もありますが適宜ぐぐって補えばよいでしょう。 ・AndroidTrain
PhotoShop,Illustrator手抜きチュートリアルについて
photoshop (55) アイコン (1) テキスト効果 (5) テクスチャ (2) ボタン (9) 写真補正 (1) 基本操作 (14) ショートカット (1) 応用編 (14) 素材作り (7) WEBパーツ (2) 見せ方 (3) 写真風 (1) 質感 (2) その他 (1) ツール (7) シェイプ (3) ペンツール (3) 外部リンク紹介 (1) 未分類 (3) 素材配布 (1) パターン (1) 当サイトについて 当サイトはPhotoShopやIllustratorを使ったデザインについてのチュートリアルを扱っているページです。 初心者の方でもそれなりのデザインが作れるように出来るだけシンプルに解説していきますが、 チュートリアル記事を書くのに結構時間がかかるため、名前の通り多少手抜きしています。 不明点などあればコメント欄からコメントしていただけたらと思います。 もし、
【点線 - 手書き風 ★★★】点線を使った縫い目風デザインを一から作る方法
前回は点線の描き方をやってみた。 点線を描くことが出来れば、簡単に縫い目風のデザインを作ることが出来る。 まずは点線を描く まずは点線を描く。 ここが出来れば、もうできたも同然。 Photoshopで点線の罫線を描く方法 をもう一度復習して欲しい。 まずは、ペンツールを使って適当な形を作ろう。 シェイプツールを使って、簡単に作ってもいい。 とにかく、パスを使ってラインをかければ何でも。 ペンツールで適当な形を作る 次に点線用のブラシを用意する。 今回は誰でも使える基本ブラシから選ぶ。 ブラシを選択 ブラシで点線が描けるように設定する。 [真円率]と[間隔]を調整して、点専用のブラシにする。 ブラシの設定 このままだと、方向が一定なので、進行方向に従って描くようにする。 [角度のジッター]を設定する。 角度のジッターの設定 あとは Photoshopで点線の罫線を描く方法 でやったように、[
Photoshopで人物の髪の毛を「境界線の調整」を使って簡単に切り抜く方法 | ページ 2 / 3 | 東京上野のWeb制作会社LIG
こんにちは、デザイナー兼フォトグラファーのおまめ （@omame_creator） です。 今回はPhotoshopで写真を切り抜く方法、髪の毛のような細かいものをきれいに切り抜く方法、背景と馴染ませる方法を解説します。 どれも私が試して一番短い時間で簡単にできた方法なので、ぜひ試してみてください！ 独学でつまずいていませんか？ Photoshopの使い方を効率的に学びたい、プロのデザイナーに教えてもらいたい……という方は、「スクールでの勉強」もおすすめです。LIGでもWebクリエイター育成スクール「デジタルハリウッドSTUDIO by LIG」を運営しております。「今すぐスクールの概要を知りたい！」という方は、ぜひこちらより資料をご請求ください。 ※この記事は2022年3月に編集部が情報を更新しました 「選択とマスク」を使って髪の毛を切り抜く方法 髪の毛を目立たせるため、強めになびかせた
CSS(スタイルシート)の基本、小技、テクニック総まとめ
CSSの基本や使える小技テクニックなどを幅広くまとめました。以前書いて今もそこそこアクセスがある「CSSの知識をもっと深める30+2の小技テクニック集｜Webpark」という記事があるのですが、2年近く前の記事ですしパワーアップさせて作り直しました。 恐らく過去最長の記事ですので目次を作りました。クリックするとするりと移動します。基本的な内容が多いですが、お役に立つ項目があればうれしいです。 ということで順番に説明していきます。 1. 全般的なこと 1-1. CSSリセット ブラウザごとでデフォルトのスタイルは異なっています。その違いをそのままにしておくと、後でブラウザ間の表示の違いに悩むことになり、どこが原因か分からないとイライラしてしまいます。 そんなことのないように、いったんデフォルトのスタイルをリセットしてしまおうというのがリセットCSSです。 方法は色々ありますが、個人的には一番
HTML5 × CSS3 × jQueryを真面目に勉強 – #12 Pinterest風グリッドレイアウトを作ってみた | DevelopersIO
そんな訳で、写真共有SNSの一つであるPinterest(ぴんたれすと)。従来のグリッド式レイアウトのように高さが均一のグリッドが整然と並べられているのと違い、異なる高さのグリッドが画面いっぱいに敷き詰められているレイアウトが特徴的でオサレです。（※こういったレイアウトはピンボード風と呼べば良いのでしょうか…？） Pinterest Pinterest とはピンボード風の写真共有のソーシャル・ネットワーキング・サービス。特に女性に人気がある。ウェブサイトとアプリはテーマに基づいて写真のコレクションを作ることが出来る。サイトのミッションステートメントは「面白いと感じるものを通じて世界全員をつなぐ」。アメリカ Palo Alto にある Cold Brew Labs によって運営されている。 Wikipediaより引用(http://ja.wikipedia.org/wiki/Pinteres
パンくずリスト（Topic Path）を作成する際に使えそうなサンプル8種｜CSS HappyLife
普通のエントリー久々な気がする今日この頃。 今回はトピックパスとかパンくずリストなんて呼ばれてる、ちょっと規模の大きいサイトでは日常茶飯事で見かけるアレのサンプル色々です。 サンプルの前に #main .entryBody #topicPath_01 とかってなってますけど、#main .entryBody はウチのサイトの都合で優先順位上げの為にやってるんで、コピったりする場合はいらない感じです。 #main .entryBody #topicPath_01 { margin:10px 0; } #main .entryBody #topicPath_01 li { display:inline; line-height:110%; list-style-type:none; } #main .entryBody #topicPath_01 li a { padding-right:10
Illustratorでピクセル単位の作業を奇麗に行うための方法（イラレのピクセルずれ問題） - フリーでWebデザインとかやってる紳士。
2017年の追記（CC2017向け） 次の点に留意して作業すればOK。基本的にイラレのピクセル周りの扱いはモリモリ改善されているのでだいぶ楽になった。 次セクション「2016年の追記」との違いだけを列挙する。 変形パネルの「ピクセルグリッドに整合」と「新規オブジェクトをピクセルグリッドに整合」が廃止され、あらたに「コントロール」バーの一番右に「ピクセルのスナップオプション」が追加された。これをオンにする。またその中の詳細項目にも全部チェックをつけておく。 それでも作業中に何かのはずみであるオブジェクトが整数ピクセルじゃない状態になったら、「ピクセルのスナップオプション」の隣にある「選択したアートをピクセルグリッドに整合」ボタンをポチして位置調整する。私は今までコントロールバーは邪魔なので非表示にしていたが今はこのボタンのためだけに表示している（スクリプトでなんとかなりそうな気もするが調べて
JavaScript アニメーションのデザインパターン
JavaScript でアニメーションを作る アニメーションとは何？ ビューを少しずつ回転、拡大縮小、移動、変色などを行い、連続的な動きを作る こんな感じ <div id="view">hoge</div> <script> var el = document.getElementById('view'); el.style.opacity = 1; setInterval(function() { el.style.opacity -= 0.01; }, 10); </script> なんで、あんな感じの書き方になるの？ setInterval の意味が分からない こんな感じで書けないの？ <div id="view">hoge</div> <script> var el = document.getElementById('view'); el.style.opacity = 1; w
jQueryでアコーディオンパネルUIを自作する (1/3)
「アコーディオンパネル UI」の完成画面。ラベル部分をクリックすると、下に隠れていたパネルが表示される（画像クリックでサンプルページを表示します） シンプルなアコーディオンを作ってみよう アコーディオンの基本動作から作ります。HTML／XHTML（以下、HTML）は次のとおりで、ラベル部分をdt要素、パネル部分をdd要素で記述する定義型リストで設定します。 ▼サンプル01（HTML部分） <dl> <dt>Step.1</dt> <dd><p>Lorem ...（中略）... venenatis.</p></dd> <dt>Step.2</dt> <dd><p>Integer ...（中略）... accumsan. </p></dd> <dt>Step.3</dt> <dd><p>Integer ...（中略）... imperdiet. </p></dd> </dl> デザインはCSS
Easy Slider -画像やコンテンツをスライドで切り替える[jQueryプラグイン] - JavaScriptテックラボ - [SMART]
使用方法 リスト要素のパネルをスムーズなアニメーションでスライドさせるスクリプト「Easy Slider」をcss globeから紹介します。 Easy SliderはjQueryのプラグインのため、実装にはjquery.jsが必要です。 Easy Sliderからファイル一式をダウンロードします。 Easy Slider 1.7 - Numeric Navigation jQuery Slider HEAD要素にjQueryとEasy Sliderプラグインを呼び出すコードを記述します。 <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="easySlider.js"></script> 続けてHEAD要素にEasy Sliderを呼び出すスクリプトを記述
ウェブデザイナーとしてスキルアップするための20のメソッド
素晴らしいデザイナーは日々、自身のスキルを向上しています。 「もうここで十分です」と言って成功したデザイナーを誰も聞いたことがないでしょう。 ウェブデザイナーのスキルアップに役立つ20のメソッドを紹介します。 20 Methods for Upping Your Current Web Design Skills [ad#ad-2] 下記は各ポイントを簡潔に意訳したものです。 原文はそれぞれもう少し長いです。 ユーザーインターフェイスのデザインパターンのスタディ ウェブデザインのために最も良いUIをチェックし、研究してください。 ディテールに注意を払う 日常や他のウェブサイトのディテールを見て、自身のデザインにも多くを加える練習をしてください。 SEOのテクニック クライアントの多くはSEOサービスを提供するウェブデザイナーが好きです。 ウェブデザインのトレンドを知る ウェブトレンドは単に
CSSリファレンス(CSS入門) - とほほのWWW入門
CSSとは？ CSSの例 CSSの指定方法 style属性で指定する方法 <style>～</style>で指定する方法 <link>を用いた外部CSSファイルで指定する方法 @importを用いた外部CSSファイルで指定する方法 タグと要素とセレクタ 継承 セレクタ CSSネスティング コメント 優先度の順位(詳細度) 長さの単位 CSSのメリット 見栄えを一度に指定できる 見栄えと意味を分離できる CSSとは？ CSS は Cascading Style Sheets の略です。CSSは、HTMLで記述された Webページの見栄え・スタイルを効率的に定義するための技術です。HTMLで文書の意味を定義し、CSSで見栄えを定義することにより、意味と見栄えを分離することが可能となります。 CSSの例 最も基本的なCSSの使用例を下記に示します。この例では、<h1>～</h1> で囲まれたタイ
40分で覚える！jQuery速習講座 (1/6)
いまやWeb制作に欠かせなくなったJavaScript。でも、「JavaScriptはほとんど“アリモノ”で済ませている」という方も多いのでは？ そこで、WebデザイナーやマークアップエンジニアなどのWeb制作者の方向けに、いま一番人気のJavaScriptライブラリー「jQuery」の基本を学べる特別レッスンをお届けします。題して、「40分で覚えるjQuery」。要点だけにぎゅっと絞って解説しますので、手を動かしながら今すぐjQueryを始めましょう。 【0分目：導入編】 jQueryのダウンロードと利用方法 jQueryのライブラリー本体（JavaScriptファイル）は公式サイトからダウンロードし、head要素などにscript要素を書いて読み込みます。
[携帯]携帯サイトで枠線を表現する方法 │ これからゆっくり考L +α
3キャリア1ソースでコーディングする場合、枠線を実現するためにはどのようにすればいいと思いますか？ ぱっと思い浮かぶのは、恐らくcssのborderプロパティだと思いますが、実際どんな感じになるのかチェックしていきます。 xhtmlの場合、htmlの場合、と両方確認してみました。 サンプルページ（border使用） QRコード →サンプルページを見る <div style="text-align:center;"> <div style="background:#eeeeee;border:2px solid #000000;text-align:center;width:80%;margin:0 auto;"> <img src="img/sp.gif" alt="" width="1" height="2" /><br /> ｻﾝﾌﾟﾙです｡ｻﾝﾌﾟﾙです｡<br /> <img sr
[JS]壁一面に写真を並べたようなギャラリーを作成するチュートリアル
画像をダイナミックに配置し、それに負けないくらいダイナミックなアニメーションで画像を拡大表示するギャラリーのチュートリアルをCodropsから紹介します。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
おタグるーむ |トップページ
http://www.designwalker.com/2010/05/css3.html
