2018年2月の、これだけは押さえておきたいWeb関連の動き
「Web系の最新情報を知りたいけど、日々業務が忙しくて追いかけられない」という方のために、1ヶ月のWeb系ニュースの中で「これだけは押さえておきたい」というものを1つの記事にまとめています。 Webデザイン デザイナーの秘密道具@spicagraph デザイン、キャッチコピー、アピールポイントなどの話です。イラスト入りで分かりやすいですね。 Adobe XDで快適！と感じたこと6つ – aicocco’s PhotoLog – g.o.a.t ワイヤーとカンプ、プロトタイプを1つのファイルで できるようになったというのは良いですね。 iOS 11 iPhone GUI | Facebook Design FacebookによるiPhone iOS11 UI素材。PSD、Sketch等。 コーディング CSSで変数（カスタムプロパティ）を使ってみよう | Webクリエイターボックス IE11
2017年12月の、これだけは押さえておきたいWeb関連の動き
「Web系の最新情報を知りたいけど、日々業務が忙しくて追いかけられない」という方のために、1ヶ月のWeb系ニュースの中で「これだけは押さえておきたい」というものを1つの記事にまとめています。 Webデザイン チームの課題から考える、Adobe XDとSketchの導入メリット – PSYENCE:MEDIA リクルート社ではPhotoshopで作られていたデザインがSketchやXDに置き換えられはじめているとのこと。 Sketchが適しているのは大規模なサービスを運用し、複数のデザイナーがいる場合、XDが適しているのは「作る→検証する→再考する」を行うことが多い場合だそうです。 Adobe XD「私は潤滑油のような存在です」 ぼく「採用！」 – Qiita タイトルはふざけているように見えるかもしれませんが、内容は「Adobe XDがデザイナーとフロントエンドエンジニアとの円滑なコミュニ
2017年11月の、これだけは押さえておきたいWeb関連の動き
「Web系の最新情報を知りたいけど、日々業務が忙しくて追いかけられない」という方のために、1ヶ月のWeb系ニュースの中で「これだけは押さえておきたい」というものを1つの記事にまとめています。 Webデザイン Adobe XD 11月アップデートリリース！デザインスペック追加で開発者への受け渡しをもっと簡単に #AdobeXD | Adobe Creative Station デザインスペックはAdobe MAXでも話題になっていましたね。かなり期待されている機能だと思います。 もっと楽するweb制作！Illustrator & Photoshop 動画解説 – のんびりデザインしているような。 Adobe MAXでの北村さんのセッションの動画や補足がまとめられています。 知財教材「デザイナーが身につけておくべき知財の基本」 | 経済産業省 特許庁 デザインと知的財産権などについてまとめられ
2017年10月の、これだけは押さえておきたいWeb関連の動き
「Web系の最新情報を知りたいけど、日々業務が忙しくて追いかけられない」という方のために、1ヶ月のWeb系ニュースの中で「これだけは押さえておきたい」というものを1つの記事にまとめています。 Webデザイン Adobe XD 正式版がついにリリース！CCライブラリで画像もPhotoshopと連携 #AdobeMAX #AdobeMAXJP | Adobe Creative Station Macだけでなく、Windows版も正式版がリリース。名前は Adobe Experience Design から Adobe XD に変わったそうです。 Adobe XD CCに今後追加される機能は？#AdobeMAX #AdobeMAXJP | Adobe Creative Station Zeplinとの連携など「サードパーティツールにも対応」とのことですが、アドオンは自由に作れるようになるのですか
2017年9月の、これだけは押さえておきたいWeb関連の動き
「Web系の最新情報を知りたいけど、日々業務が忙しくて追いかけられない」という方のために、1ヶ月のWeb系ニュースの中で「これだけは押さえておきたい」というものを1つの記事にまとめています。 Webデザイン 空レイヤー名にルールを書くだけで Photoshop の自動アセットが劇的に楽になった – LOGzeudon レイヤーごとに指定しなくても、空のレイヤーに初期設定を書くことができたのですね。 Adobe、Creative Cloudの次期メジャーアップデートでMacのシステム要件を引き上げ「OS X 10.11 El Capitan」以上をサポートすると発表。 | AAPL Ch. Yosemite以下はそろそろAppleのサポートが切れるからだと思われますが、Windowsは2009年の7からサポートされているのが少し不公平な気もします。 Webブラウザー 新ブラウザ「Firefo
意外と知られていないHTMLの基本の話
私はWeb制作が初めての方向け講座だけでなく現役の制作者の方向けに様々なWeb講座をしていますが、現役のWeb制作者の方でもHTMLに関して意外と知られていないんだなと思うことがいくつかあります。 特に、HTML5以前の古いHTMLの使い方のまま覚えている方が多いように思われますので、この記事ではそれを中心に取り上げてみました。 なお、この記事はHTML 5.1およびWHATWG HTML Standardの仕様書を参考に書いています。 width=”100%” のように数値以外の文字列を “” に入れるのはNG たとえばimg要素などで、ブラウザの幅いっぱいに画像を表示したいという場合、昔はimg要素に width=”100%” のような属性をつけることがありましたが、HTML5からはwidthなどの属性値に数値以外を含めることができなくなっています。（つまり%などの単位を含めることがで
iPhone XでWebページを見るとどんな挙動になるか
既にご存じかと思いますが、iPhone Xではディスプレイの形がこれまでのように長方形ではなく、複雑な形になりました。 そこため、アプリやWebページの表示がどうなるのか気になっている方も多いと思います。 Xcode 9のiOSシミュレーターでiPhone Xのシミュレーションができるようになったため、早速いろいろなWebページをiPhone X・iOS 11のSafariで見てみたところ、いくつか思わぬ発見もあったのでまとめたいと思います。 iOSシミュレーターの使い方 macOS SierraでMac App Storeを起動し、Xcodeを最新の9にアップデートします。 El Capitanやそれ以下ではXcode 9はインストールできないのでご注意ください。 Xcode 9を起動し、メニューの［Xcode＞Open Developer Tool＞Simulator］でiOSシミュレ
2017年7月の、これだけは押さえておきたいWeb関連の動き
Webニュース 2017年7月の、これだけは押さえておきたいWeb関連の動き Wednesday, August 2nd, 2017 「Web系の最新情報を知りたいけど、日々業務が忙しくて追いかけられない」という方のために、1ヶ月のWeb系ニュースの中で「これだけは押さえておきたい」というものを1つの記事にまとめています。 Flash Player Flash とインタラクティブコンテンツの未来 | Adobe.com 「アドビは技術パートナーの協力のもと、Flashのサポートの終了を計画しています。具体的には、2020年末にFlash Playerのアップデートおよび配布を停止する予定」とのことで、いよいよFlash Playerの終了時期が発表されました。 これをうけて「2020年末にFlashコンテンツがWebブラウザーが見れなくなる」と思っている方が多いですが、実際は2019年には
2017年6月の、これだけは押さえておきたいWeb関連の動き
「Web系の最新情報を知りたいけど、日々業務が忙しくて追いかけられない」という方のために、1ヶ月のWeb系ニュースの中で「これだけは押さえておきたい」というものを1つの記事にまとめています。 コーディング CSSプロフェッショナルのためのTIPS – Qiita CSSの便利な小技・テクニックのまとめ。日本語訳です。 W3CがHTMLとDOMを（再）勧告する理由 – 水底の血 なぜW3CはWHATWGのHTMLを再勧告するのかは私も気になっていましたが、特許からの保護という理由があるそうです。 しかし、この記事に書かれていることと同じようなことを私も感じました。 ブラック企業は少ない!? アンケート結果から分析するイマドキのウェブ制作事情 – ICS MEDIA 「JavaScriptの変数宣言にvarを使いますか、letを使いますか？」という質問では、varのほうが多いもののletも39
2017年4月の、これだけは押さえておきたいWeb関連の動き
「Web系の最新情報を知りたいけど、日々業務が忙しくて追いかけられない」という方のために、1ヶ月のWeb系ニュースの中で「これだけは押さえておきたい」というものを1つの記事にまとめています。 デザイン マテリアルデザインでやってはいけない72のこと（間違いチェックリスト） とても分かりやすくまとまっていると感じました。 漢字のスタイルが自由自在？ “zi2zi”でニューラルネットワークのスゴさを再認識 – やじうまの杜 – 窓の杜 画像は GitHub – kaonashi-tyc/zi2zi: Learning Chinese Character style with conditional GAN より。 フォントを異なるスタイルに変換というのはすごい技術だと思う一方で、著作権的に問題ないのか、文字を並べたときに統一感や読みやすさが保たれるのかなど気になることもあります。 コーディング
Macで素早く作業する10のTIPS+α
Macで作業するときに知っておくと素早く作業できる10個のTIPSと、素早く作業する以外のTIPSを3個まとめました。 主に macOS Sierra 向です。 MacからiPhoneに素早くたくさん単語登録 #MacTips iPhoneの日本語入力にたくさんの単語登録をするのは面倒だが、実はMacで単語登録したものを同期できる。 ［システム環境設定＞iCloud＞iCloud Drive］にチェックを入れ［システム環境設定＞キーボード＞ユーザ辞書］で登録するだけ。 — なつき@スマフォコーディング講座まもなく (@Stocker_jp) 2016年12月7日 素早くテキスト読み上げ ［システム環境設定＞アクセシビリティ＞キーを押した時に選択しているテキストを読み上げる］にチェックを入れると、opt+escで簡単にテキストの読み上げができる。 私は速度を速めにして原稿内容のチェックに使っ
2016年11月の、これだけは押さえておきたいWeb関連の動き
「Web系の最新情報を知りたいけど、日々業務が忙しくて追いかけられない」という方のために、1ヶ月のWeb系ニュースの中で「これだけは押さえておきたい」というものを1つの記事にまとめています。 デザイン Webデザインでよく使うUI要素の名称・用語一覧 – Qiita 特にスマートフォンサイトでよく使われるUIの名称について解説されています。 開いただけで色が変わる……！ Photoshopの「自然な彩度」に大問題 – やもめも 「自然な彩度」がドキュメント埋め込みプロファイルではなく、なぜか作業用カラースペースのプロファイルを使って色を処理している 複数人で印刷物を作っている場合などに困りそうですね。 コーディング・プログラミング もう、レスポンシブでいいんじゃない？ – Rriver 超大規模なWebサイトやアプリは別として、たいていのWebサイトはレスポンシブで良いなぁと私も最近思って
MacBook Pro Late 2016レビュー: おっとTouch BarとUSB-Cの悪口はそこまでだ
MacBook Pro 13インチ Touch Bar モデル（Late 2016）を11/17から使用し、3週間ほど経過したのでレビューを書きました。 MBPの購入を検討している方で、特に「Touch Barってどういうものだろう？不便はないのだろうか？」とか「USB端子が変わったことによるメリットとデメリットは？」という事が気になる方に参考になるように書いています。約15,000文字あります。 Touch BarとUSB-Cについて多くの人が誤解していること レビュー本文の前に、まず大手メディアが報じているMacBook Pro、Touch Bar、USB Type-C（以下USB-C）に関する記事を読んでいると、明らかにまともにMacBook Proを使用せず書かれているとしか思えない、間違いだらけの記事や質が低い記事が多すぎます。 例えば 以下のようなことが書いてある記事は完全に間
Illustrator代替アプリAffinity Designerをセールで買ってみたけどいい感じ
Adobe Illustrator の代替アプリとして知られる Affinity Designer というMac用アプリ（¥6,000）がセールになっていたので購入してみました。 もちろん、月額ではなく買い切りのアプリです。 追記: このセールは既に終了しています。 しばらく使った感じ、なかなかよい感触だったので、使ってみて良いと感じたところと良くないと感じたところ、気づいたことなどまとめてみました。 Affinity DesignerのPhotoshop的な機能 Affinity Designer は、よく「Adobe Illustrator の代替アプリ」と言われますが、厳密には Illustrator の機能だけでなく、Photoshop の機能の一部も持っています。 具体的には以下のような機能です。 ちょっとしたビットマップ画像の修正（長方形選択ツール、ブラシツール、消しゴムツール
CSS3でGoogle検索やはてブを見やすくしたり、キュレーションサイトを目立たなくする方法
最近、調べ物をしようとGoogle検索した時にキュレーションサイトなどの役に立たない、あるいは他のサイトの情報をまとめただけのサイトばかり上位に表示されてしまい、ストレスがたまることが多くなってきました。 そこで、検索結果のCSSを上書きしてキュレーションサイトなどを半透明で表示し、ついでに記事が書かれた日付や「未指定」などを目立つようにカスタマイズしました。 ※ このスクリーンショットは、この記事でできるGoogle検索結果のカスタマイズ例です。1件目のNAVERまとめは半透明に、2件目の記事ははてなブックマーク数、サムネイル、記事が公開された日付を目立たせるなどして「役に立つページかどうか」を判断するヒントをわかりやすくしています。 検索結果から特定のサイトを非表示にする拡張の問題点 最初は、Google公式の Personal Blocklist という「検索結果から特定のサイトを非
2016年10月の、これだけは押さえておきたいWeb関連の動き
「Web系の最新情報を知りたいけど、日々業務が忙しくて追いかけられない」という方のために、1ヶ月のWeb系ニュースの中で「これだけは押さえておきたい」というものを1つの記事にまとめています。 コーディング CSSになり損ねた言語たち | デザイン | POSTD タイトルの通り「CSSになり損ねたスタイル言語の話」なのですが、CSSとは書き方や考え方が違ったり、部分的にCSSより便利な言語もあったりと面白い記事でした。 W3Cのは『欠陥フォーク』！？ HTMLスナップショット2016 ── HTML5 Conference 2016セッションレポート | HTML5Experts.jp 「WHATWG HTMLこそが実装者とウェブ開発者によって参照されるべき最新の仕様であり、欠陥フォーク（W3C HTMLのこと）は答えではない」というのはWHATWG HTMLのエディターであるAnne v
iPad Pro + Apple Pencilお絵かきアプリのまとめ
この記事の内容は、2016年4月21日に渋谷 Stocker.jp / Space で開催した iPad Pro + Apple Pencilお絵かきアプリの情報交換会 で私がお話しした内容、あるいはお話する予定だった内容です。 Markdown の原稿をほぼそのまま掲載しているため、箇条書きで読みづらいかもしれませんがご了承ください。 Apple Pencilの感想 持った感覚はほぼ鉛筆 長さも鉛筆とほぼ同じ、重さもタブレット用スタイラスとしてはかなり軽い テーブルの上で転がり過ぎないように、わざと重心をずらしてある。回転が止まった時に「Apple Pencil」のロゴが上を向くように設計されている とにかく遅延が少ない iPad Proに差して、15秒の充電で30分使える 0%→100%までの充電時間は約5分 バッテリー残量を知るには、画面上から下にスワイプし「今日＞バッテリー」を見る
Photoshop CC（14.1.2）の「属性」パネルでシェイプのサイズや位置を変更する方法
Photoshop CC では、長方形などのシェイプを作成した際に「属性」パネルでシェイプのサイズや位置を変更することができるようになりました。 これでWebデザインカンプ制作がやりやすくなる！と思ったのですが… Photoshop CC を 14.1.1 以降にアップデートすると、移動ツールでシェイプを選択しても「属性」パネルでサイズや位置を変更できなくなりました。 今の今まで、てっきりこの挙動はバグだと思っていたのですが、社会人のためのWebデザインスクール の受講生の方が Adobe に電話で問い合わせたところ後日回答をいただき、「そのように仕様が変更された」のだそうです。 そして、「属性パネルによるサイズや角丸の変更は [パス選択ツール/パスコンポーネント選択ツール] から利用できます」とのことだそうです。 つまり、Aキーを押すか、ツールから [パス選択ツール（白矢印）] か [パ
Webデザイナーやコーダーの方でも知っておきたいPHPの便利な使い方
この記事は、普段サーバーサイドスクリプト言語（PHP、Perl、Ruby等）を書いていない方を対象に、PHP を使うとどのようなことができるのか、あるいはできないのかを解説した入門記事です。 キャンペーンページで、指定の時間に受付を終了する たとえばキャンペーンページで、指定の時間までは「お申込みはこちら！」というボタンを表示し、それ以降は「キャンペーンは終了しました」と表示させたいとします。 こういう時、PHP はわりと直感的に書けるので便利です。 "; // 現在時刻が、キャンペーン終了後であれば } else { echo "キャンペーンは終了しました "; } ?> ※コメントで、「日付はUNIXタイムスタンプに変換してから比較したほうがよい」とご指摘いただいたので、strtotime() を使用するよう変更しました。 3行目に “2013-09-01 00:00:00” という箇
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Web制作者必見！Photoshop CCにSlicyのような画像アセット（Generator）機能が追加
