Transcript ϑϦʔϥϯεσβΠφʔͷ � ʮͭ͘ Δ͜ͱɺ ͸ͨΒ ͘ ͜ͱʯ ࣗݾ঺հ ͢Έͩ͋΍͔ ʢ֯ాҁՂʣ 8FCσβΠ ϯˍΠ ϥε τ Ϩʔλʔ େࡕࡏॅɺ ੍࡞ձࣾͰͷ8FCσβΠφʔΛܦͯ����೥ʹϑϦʔϥ ϯεʹɻ ओʹ-1΍αΠ τͷσβΠϯɺ ΠϥετΛ੍࡞͍ͯ͠·͢ɻ ෉ ͱ�ࡀͷஉͷࢠͱ ͏͕͗͞�ඖ͍·͢ɻ Ωϟ ϦΞ͚ͩ͸ ��೥ʹ ɾ ɾ ɾ ࠓ೔ͷ͓͠ͳ͕͖ σβΠϯΛ࡞Δ ʮཧ࿦ʯ ͱ ʮϏδϡΞϧʯ � ཧ࿦ฤ � ϏδϡΞϧฤ � σβΠϯͷઆ໌ฤ ϑϦʔϥϯεͱͯ͠ಇ͘ Θͨ͠ͷ৺ಘ 01 02 ࠓ೔ͷͶΒ͍ ࠓ೔ͷςʔϚ͸ ʮσβΠϯࡇʯ ɻ ʮσβΠϯ͸໰୊ղܾʯ ͜ͷ͜ͱ͹Λͣͬͱ؊ʹ໏͡ ͖͚ͯͨΕͲɺ ࠷ۙͲ͏΋ͬ͘͠ Γ͜ͳ͍ɻ ࠓ೔ͷͶΒ͍ ݟͨ໨͚͕ͩσβΠϯ͡Όͳ͍ɺ Ͱ΋σβΠϯͷத Ͱɺ ͖Ε͍ͳ৭ɺ ͖ͯ͢ͳϑ

独学でWebデザインやコーディングなどのWeb制作スキルを身に付けたい方向けのノウハウを紹介します。 Web制作のテクニックを学ぶ方法は、 研修やセミナーで学ぶ方法 スクールに通って学ぶ方法 お金をかけずWebサイトや本を参考に学ぶ方法 の3つに大別できます。 しかし、研修やセミナーは開催地が都市部に偏っていますし、スクールに通うのは経済的な負担が大きいのも事実です。 そこでおすすめしたいのが自宅で学ぶ独学です。 筆者自身も全くの初心者の状態から独学でWeb制作のスキルを身に付けて今はそれをもとに仕事をしています。 独学中には勉強方法としての反省点や手ごたえを感じたことも多いです。 そこで、今回は筆者がWeb制作を独学する中で分かった、独学による効率の良い勉強方法についてお話しします。何から勉強をはじめていいのか分からなかった人の指針になるかと思います。 リアルなお話をしますが、独学ではじ

僕がウェブ上に日記を書き始めて１５年以上になる。いろいろなサービスを渡り歩いてきたが、はてなブログを利用し始めたのが１３年１２月なのでちょうど丸２年。僕がウェブ上に日記を書き始めた頃と大きく変わったのは、ウェブ日記がブログと名称を変えたことと、ＰＶやブログで稼いだ金額とそのノウハウをブログ上で公表するようになったことだ。僕はそういう記事を積極的に読もうとは思わない。なぜならそれらのノウハウのうち、どれくらいのものが有効なものなのか疑わしいからだ。 実のところ僕は自分のブログを積極的に読んでいる人がどれだけいるか知らない。はてなブログの購読者数が２６００なので各リーダーの登録者数を足しても数千程度くらいだと見込んではいる（確認する術を知らない）。はっきりいってニッチだ。はてなブログは購読者数のランキングを発表していないので、２６００という数値がどのくらいの位置にあるのかはっきりはわからないけ

私の勉強方法まとめてみました。 といっても 「いい情報をとりこんで、実践して、その結果をアウトプット」 をひたすらしているだけなのですが、実際にどのようなサイトや本を見てインプットしているか、どんな風に実践して、何をアウトプットしているかなどまとめてみました。 インプット 情報が美しくまとまっているサイトのフィードをチェック 国内外のWeb系の情報を丁寧にまとめてくれているブログがたくさんあります。 そういうブログのフィードをチェックしています。 デザインTipsやトレンド紹介、便利なプラグイン、プログラムなど、毎日どんどん新しい情報が出てきます。 全部読んで理解してその場で実践する、というとは不可能に近いので、へー、こういうことも出来るんだー、とさらっと頭に入れて、特に気になったものだけはてなブックマークなどでタグをつけて保存したりしています。 そうしておくことで、いざ●●しないといけな

スタイリングといっても見栄えを大きく変えるとかではなく、ほとんどがただのプロパティ説明みたいな感じになっていますが、サイト制作時に覚えておくとテキスト周りをいろいろと変更できるCSSのプロパティや使用する頻度が高そうなスニペットみたいなものをひと通りまとめてみました。 紹介するもの全てがひと通りのブラウザで自由に使えるわけではありませんが、上手く利用すれば今まで画像を使用していた見栄えをCSSだけで再現できたり、複雑な組み方をしたりJavaScriptを使って実装していたりしたものがCSSのみでシンプルに実装できたりします。 November 27, 2015 追記 前川（@maepon）さんが、このエントリーでは記載していなかった各種プロパティのブラウザ対応状況についてまとめてくださいました。 OS・ブラウザの種類やプレフィックスの有無、Can I useの各種プロパティページへのリンク

サイトデザインをする上で、デザインがワンパターンになったり、煮詰まったりすると思います。そんな時、Instagram を使わない手はありません世界中のインスピレーション溢れるアート系の発信やデザイン系のイメージがたくさん参照できます本記事ではデザインのヒントになること間違いなしの海外のアートデザイン系の Instagram アカウントをご紹介します。

文章内のテキストリンクやテキストのみで実装しているようなナビゲーションリンクなどで使えそうなホバーエフェクト・デザインのサンプルです。 文字数が変化したり改行が頻繁に入るような場所などでは正直使い辛くて利用できる場面が限られてしまうものも多いのですが、シンプルなHTMLとCSSで様々な見せ方ができます。 サンプルの中で特にdisplay: inline-block;を記述しているタイプのものが意図しない箇所で改行されたり、逆にされなかったりということがあるので注意して下さい。 実際にどのような動きになってしまうのかはブラウザを縮めて確認してもらったり、または自身で環境を用意して実装・確認をしてもらうとよりわかりやすいと思います。 ここで紹介するエフェクトは、基本的に<a href="#">リンク</a>のようなHTMLに対して実装したものになります。 また、サンプルコードに含まれていません

他ではあまり見かけることのないユニークな見せ方や動きを実装したいとき、遊び心あるイースターエッグを仕込んでおきたいときなどに個人的に使えそうだなと思ったスクリプトをまとめてみました。 ブラウザやデバイスによっては実装できないものも幾つかあるのでその点は注意が必要ですが、いずれもそこまで難しい記述などもなく実装することができます。 窓に水滴がついていく様子を表現できる「rainyday.js」 とにかく実際に動いているデモを見てほしいのですが、雨が降って窓に水滴が徐々についていく様子をリアルに表現することができるスクリプトです。 水滴のサイズやついていくスピード、ぼかしや不透明度具合を調整することができます。 水面に滴が落ちているような感じを表現できる「Raindrops.js」 コンテンツやセクションの区切りなどを水面に見立て、そこに滴が落ちてきたようなエフェクトを実装できるjQueryプ

2015年8月17日 CSS 以前「これからのCSSレイアウトはFlexboxで決まり！」という記事で紹介した、CSSでのレイアウト組みに大活躍できるFlexbox。前回は基本的な使い方の紹介をしたので、今回はより実践的に使える実例を紹介したいと思います！ ↑私が10年以上利用している会計ソフト！ Flexbox対応ブラウザー 前述の記事の通り、現行のモダンブラウザーでは問題なく利用できます。ただし、Safari用に -webkit- のベンダープレフィックスが必要です。IEについては11から正式に対応。 そしておなじみの日本でのブラウザーシェア情報。2015年7月ではIE11が32.86%でトップです。Flexboxに対応していないIE9は3.17%。制作するサイトに応じてFlexboxを取り入れるか検討しましょう。 一番基本的なWebサイトのレイアウトである、2カラム。まずはこのレイア

ferret編集部：2014年12月11日に公開された記事を再編集しています。 「デザインに関しては、全くわからないからデザイナーさんに全てお任せ！」 「デザインは感性や才能だし、なんて伝えていいかもわからない。」 と感じる方も多いのではないでしょうか？ デザインが本業でない場合、時間を割くのが難しいという担当者さんが多いのが現状です。 しかし、デザインの多くは原理原則や、法則に則ったうえで考えられています。少しでも理解することでデザイナーさんとの連携もスムーズになりますし、なによりクオリティが上がること間違いないです。 今回は、デザインの原理原則が分かりやすく書かれている記事をまとめました。 1.デザインの基礎 【追記あり】【初心者】デザインってなんだ？「デザイン」の概念と、４つの基本原則を知ろう http://wp-e.org/2014/03/09/995/ こちらの記事では、そもそも

雑記（という名のメインカテゴリー） FIREしてコーチングを学んで、ヒトデの人生が動いた半年間の振り返り（あとセッション募集） 2024年3月19日 hitode99 https://www.hitode-festival.com/wp-content/uploads/2019/01/77DrZmCh.png 今日はヒトデ祭りだぞ！

はじめに こんにちは！nanapiデザイナーのyunicoです！「Git Advent Calendar 2014」の15日目を担当します（^o^） 今年はなんか色々GitGit言っていた年だったので、最後にアドベントカレンダーに参加しちゃいます！わいわい！去年からすると、まさか一年後にGitのアドベントカレンダーに参加しているとは思いもよりませんでした〜。感慨深いものです！よろしくお願いします＜(_ _)＞ 前置きと今年やったことまとめ TechBlogでGitについて書いた nanapi勉強会でTL GithubKaigiでTL PatchworkTokyoでメンター&LT Gitが大好きになった♡というブログを書いたら色々ご縁があり、3回ほど登壇しました(╹◡╹) nanapi勉強会vol.2では「 GUIじゃなくてターミナルからコマンドでGit使うと便利！」という話、GithubK

「Webアイコンクッキー会」 とは？ いまギークな女子のあいだで、ひそかに噂の「Webアイコンクッキー会」とは Webサービスのロゴやアプリのアイコンなど「インターネット」をモチーフにして みんなでいっしょにギークなクッキーを手づくりしよう、という会のこと。 おいしくてかわいい、食べられるインターネットをたのしんでいく企画です。 インターネット上でも 「かわいい！」 「これはすごい！」 「いつか私もつくってみたい！」 という声があふれたWebアイコンだらけのクッキー会、写真たっぷりでお届けします！ --> こんなところでやりました 会場は「農」と「食」をテーマにした コワーキングスペース「銀座ファーマーズラボ」http://www.farmers.jp/ 木のぬくもりと緑あふれるやさしいデザインで、ほっとくつろげる空間。 こんなかんじのところでした。 はじまりました インターネットが大好き

Photo by Matthew Pearce 今回のpaiza開発日誌は片山がお送りします。 皆さんはWebデザイナーがどんな仕事をする人か？という事を明確にイメージ出来るでしょうか？ 最近、弊社でWeb/UIデザイナーを採用する事になったのですが、求人の要件を固めていくにあたって、そもそもWebデザイナーって、どんな経験を持った人を指すんだっけ？というのが曖昧だったので、Webデザイナーのキャリアパスと、15分野のスキル一覧を書き出してみました。 現在20代のWebデザイナーだという方が、今後のキャリアを考える際にもちょうど参考になりそうな物になったので、せっかくなので公開してみようと思います。Webデザイナーからどのような職種にキャリアアップ出来るのかと言う事と、そのために必要な経験を15分野にまとめてみました。 企業がWebデザイナーを採用する際の求人要件定義にも使えるかと思います

さあ、CSS3三部作の完結編となりました。 モバイルあたりの狭いスペースでもこれなら気兼ねなく検索を仕込めるというものです。 See the Pen qdLENq by shintarowfresh (@shintarowfresh) on CodePen. 色々とコード書いてますけど重要なのは .stretch { width: 4em; transition: all .6s ease; } .stretch:focus { width: 10em; } 疑似クラスの:focusを使って装飾している点。 :focus擬似クラス－スタイルシートリファレンス 入力できる状態になったらCSSが効くようになります。 長さに差を付けてCSS書いて、transitionでなめらかに動かせているだけです。 理屈さえわかってしまえば結構簡単ですね。 単純な状態変化だけならCSSで組めちゃうのでCSSな

最近よくウェブデザイナーを目指しています！というプロフィールの twitterアカウントにフォローされることが多くなりました。 ウェブ系で働いている私としては、こうやって目指すひとが増えるのは とても嬉しいこと。 夢をみるだけでなく、会社に就職したり独立したりするまえに、 いまからできることを、書きだしてみました。 ●実際に働いているクリエイターさんのお話を聞く 本当はこれが一番早いんです。 本物のデザイナーさん、クリエイターさんに出会え、 本物だと気がつけたら、その人についていったらいいとおもいます。 何に興味があって、何を買って、いまどんな行動をするのか。 その理由は何なのか。 行動から考えてみると、答えに近づきやすいでしょう。 ただ、ウェブデザイナーの場合、会社でおつとめしている方でも会社員よりの人 クリエイター寄りの人、アルバイト寄りのひと 楽天などで商品登録をしているひと、マーケ

『フォトショップ・ブイアイピー』の新着記事です。フォトショップやデザインをたのしむウェブサイト。2009年３月創刊以来、3800を超えるコンテンツを更新しています。フリーフォントなどの無料デザイン素材／配色やWeb制作といった最新トレンドも公開中。

HTML/CSSを素早く記述する「Emmet」の連載をはじめてました 2015-07-22 Emmetとは、主にHTMLやCSSの記述・編集を強力にサポートするプラグインです。様々なIDEやエディタに対応しています。 アドビ公式ブログの「Adobe Creative Station」でEmmetの連載をはじめてました。 全6回中4回まで掲載されたので、補足を含めて紹介します。 Emmetの連載 アドビ製品の機能などを紹介する「Adobe Pinch in」というサイトで連載のはじめましたが、現在は「Adobe Creative Station」に移行して、連載を行っています。 連載内容は以下のとおりです。 第1回 Emmetを薦める理由 第2回 Emmetの省略記法を使って、HTMLを素早く入力する 第3回 エディタのコードヒントよりも早い！EmmetのCSSの記法とは？ 第4回 Emme

先日『１年でフリーのWebデザイナーになった僕が実行した8つのステップ』という記事を書いたところ、フリーランスデザイナー志望の方からクライアントからの仕事のもらい方や価格設定等についてご質問を頂いた。今回は、返答がてらフリーのデザイナーが仕事をもらっていくための戦略をまとめてみようと思う。 あくまでもここで書くのはぼくが実行したことと、実行すれば良かったのかもしれないという個人的なアイデアなのでご注意ください また、ここではデザインスキル・プログラミングスキルがある程度あるものとして話を進めていきます Webポートフォリオを作る ポートフォリオは知名度のないフリーランスが仕事をもらうための唯一の武器 個人で仕事を進めていくのであれば、ポートフォリオは必要不可欠だ。身元もよく分からないフリーランスの仕事の質を保証してくれるのはただ１つ「制作実績」だけだからだ。当たり前だがポートフォリオには自

背景はデザインにおいて、非常に重要な要素です。 ビジュアルの土台となり、他の要素がどのように見えるか決定する要因となります。 要素を引き立たせる美しい背景画像を作成するシンプルなテクニックを5つ紹介します。 5 Simple Tools to Create Beautiful Backgrounds 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。 不透明度を調整したカラーオーバーレイを使用する ぼやけた背景と対になるアイコンを使用する コピースペースと共にイメージを使用する モノクロの背景にネオンカラーのテキストを使用する 形をテキストホルダーとして使用する 不透明度を調整したカラーオーバーレイを使用する 背景となる写真画像にカラーオーバーレイを加えることで、デザインの印象を引き起こします。デザインする時のポイントは、まずは画像は彩度