先日、WordPress 4.9.8がリリースされ、Capital Pでも散々取り上げて来た新しいエディターGutenbergをテストするようダッシュボードでの呼びかけが始まった。 ダッシュボードに表示されるコールアウト。ついにこの日が来た……。 さて、Gutenbergは活版印刷術の発明者であり、人類の情報技術に革命をもたらした人物にその名をとられていることからもわかるように、革新的なプロジェクトである。 しかし、革新がもたらす創造の前には、必ず破壊がやってくる。これから訪れる大きな変化を乗り切るために、Before Gutenbergと題した連載を開始したい。本稿はその第一回である。 4.9.8になったら必ずやっておくべきこと さて、4.9.8にアップデートした方はご存知だと思うが、前述したコールアウトに「旧エディターをインストール」というボタンがある。人柱になるのが大好きな方でない限
前述したハンドブックでも基本的なことはできるのですが、全ての API やコンポーネントの情報が載っているわけではないので、もう一歩進んだことをやろうとすると、どうやってやるんだ…となってしまいました。 Gutenberg はもうだいぶ API も固まってきたんじゃないかなぁと想像していますが、これまですごい勢いでどんどん開発されてきているので、ググってでてきた情報を試してみても動かなかったりすることがあります。 そこでおすすめなのは GitHub にある Gutenberg のリポジトリを覗いてみることです。つまりソースを見るということですね。プラグインとしてインストールした Gutenberg にはビルド後のファイルしか入っていないので見てもよくわからないのですが、リポジトリにはビルド前のファイルがあるので、コアブロックのソースファイルとかをみるとかなり参考になります。 「いや、難しくて
ディレクターにチェックしてもらうとき、クライアントとの打ち合わせのとき、Webサイトの文字校正…など モニターごしで見るWebデザインでも、紙に印刷してチェックを行う機会って結構多いものです。 ただ、Webページのデザインって大体縦に長いんですよね。ランディングページなどの1ページ完結型のサイトになると、それはもう、もう!ひたすら長い! それをA4やA3用紙1枚に全体を収めようとすると、文字も読めないくらいに小さく、左右の余白もたくさん出てしまって…ちょっと残念な仕上がりになってしまいます。 こんなイメージ。なんとか収まっている…というような状態です。 今回はPDFの閲覧・編集に便利なAdobe Acrobatを使い、縦に長い画像を見やすいサイズに分割し、横に並べて印刷する方法をご紹介します。 A4用紙にこんな感じに並べて印刷していきます。 ※Mac El Capitan/Adobe Ac
This domain may be for sale!
メンタルモデルから始めるデザインする上でユーザーのメンタルモデルの理解は欠かせません。 UI やコンテンツに出くわしたとき、それをどう解釈・判断し行動するかを決めるのがメンタルモデル。 Web サイトであれば青色の文字に下線が入っていればリンクであると判断するのも、過去の経験や知識を基にメンタルモデルが築かれているからです。私たちが「使いやすい」「直感的」と感じるのもメンタルモデルとインタラクションが一致しているからと言えます。 同じデザインでも評価は変わるデザインをチームで評価するとき、メンタルモデルが共有されていないために議論が思わぬ方向へ進む場合があります。Web サイトのリンクのように広く使われているものであれば共通のメンタルモデルが築かれていますが、多くの場合そうでははありません。オンボーディング、アイコンの見た目、通知のコピーなど、UI に関わるあらゆる部分で意見の相違が発生し
PhotoshopからXD、さらにSketchへ…Atomic Designを実現させるまでにぶち当たったデザインチームの苦悩 デザイナーの横井です。こんにちは! 猫飼いなのですが猫に顔をうずめるのが難しい季節になってまいりました(毛まみれ) 久しぶりのデザイン記事となりましたが、今日は弊社デザインチームが行ったAtomic Designのシステム化の紹介と失敗体験、そしてその道のりを、赤裸々にご紹介しちゃいたいと思います。 既に完成したデザインのコンポーネント化に悩んでいる方々の参考に、少しでもなれば幸いです。 初期のスペースマーケットデザイン ゴリゴリのPhotoshopデザインだった時代 弊社のメインサービスである、スペースマーケットのデザインは約3年前にリニューアルリリースされました。 当時は全てPhotoshopでデザインされ、1ページにつき1ファイル、スマートフォンもPCも別フ
みなさまはじめまして!2018年度新卒入社デザイナーの清水です。 サイバーエージェントの新卒デザイナーは、入社後に約1ヶ月半に渡る新卒デザイナー研修を受けます。今回は新卒デザイナー研修2つ目の課題であったWebサイトのデザインについてご紹介します! 課題の内容は 「サイバーエージェントの全サービスを紹介するサイト(PC・スマートフォン)を制作する」 でした。 昨今ではWebサイト制作においてスマホへの表示対応は必須になります。今回の課題でも、PC版とスマホ版、両方のデザインを約1週間で制作しました。 新卒の中には学校の課題や自主制作などでWebデザインの経験がある人もいれば、これまで一切触れたこともない人もいるので、制作前にまずはしっかり講義で基礎知識の足並みを揃えてスタートしました。 今回は、研修に参加した11名のうち上位5名に選ばれたメンバーの作品をご紹介をしていきます! このサ
作成:2018/06/11 更新:2019/01/29 Mac > Mac初心者がインストールしておきたい、プログラマー向けアプリをまとめました。便利だなぁ。 エンジニア速報は Twitter の@commteで配信しています。 マークダウンでスライド作成 Deckset マークダウン記法でスライドを作成できる。なんとスライドに色付きのシンタックスハイライト(Code Blocks)を取り入れることができる。登壇用のスライド、提案用の資料など高速で作りたいときに。 記法一覧:Deckset Help - Deckset Help 参考:Markdownでスライドを作る決定版!「Deckset」が非常に良かった話 - 5.1さらうどん マークダウンでPDF作成 markdown-pdf エディタのAtomパッケージを使うわけですが、マークダウンで書いた文章を一発でPDFに変換できます。 サー
こんにちは。つかもと.comです。 結構前になってしまうのですが、5/26に行われたYAT(@yat8823jp)さんManaさん(@chibimana)主催のwebデザインシンキングセミナーに参加してきました! 今回は参加レポです。 目次 ・参加の目的 ・Webサイトをデザインする前に考える事(YATさん) ・「素人っぽい」を脱するデザインテクニック(manaさん) ・ 最後に◆参加の目的このセミナーを申し込んだのはずいぶん前の話だったのですが、そのときは"面白そう"、"勉強になりそう!"、それとmanaさんとYATさんに会える!という理由(笑)から参加しようと思いました。 しかし、その後実際にwebデザイナーとして働き始めて、今回のセミナーに参加する目的がよりぐっと具体的になったなぁ、と感じました。 先輩たちの知見を少しでも自分のものにするぞ!と意気込んで参加しました。 ◆Webサイト
表題の通り、お恥ずかしい限りではありますが、人生ではじめて警察(神奈川県警!)のお世話になる運びとなりました。 罪状としては「不正指令電磁的記録 取得・保管罪」、通称ウイルス罪とのことで、まさに青天の霹靂の思いです。 以下ではこの度起こったことを可能な範囲でありのまま共有できればと思います。 この記事の目的まず、この記事を公開した目的は「他のクリエイターの人に同じ経験をして欲しくない」という一点に尽きます。 手前味噌ではありますが、私はこれまで多くの尊敬するクリエイターの方々と同じように「良いクリエイターであろう」と腐心し、できうるかぎりの努力をしてきたつもりです。 今回の件に関しても決して私利私欲のためではなく、あくまでユーザーのためにできることを、と模索した結果でした。 それがこのような形で取り沙汰されることとなり、残念という他ありません。 忸怩たる思いではありますが、この件から何かし
「I love you」を訳してみる、ということ 「I love you」の訳について、みなさんは、どのような回答を思い浮かべたでしょう。講座の当日に出てきた言葉としては、 「今、会えない?」「あなたのこと、もっと知りたいんですけど」「卒業したから、生徒じゃないです」「半分こにしようか」「小さいころよく遊んでいた場所、みてみたい」などなど… 特に多くの共感を集めたのが「半分こにしようか」。 不思議と「愛」という言葉をつかわなくても、情景だったり、関係性だったり、あたたかいキモチだったり、浮かんでくるすてきな表現ですよね。 このようなユニークな課題に答えつつ、“企画”について掘りさげていく『企画でメシを食っていく(通称:企画メシ)』。その内容を通じ、相手にちゃんと伝わる言葉の作り方について、コピーライターである阿部広太郎さんと一緒に考えていきたいと思います。 【関連記事】ピース又吉、ライゾマ
2018年5月の アップデートリリース に合わせてAdobe XDが無料で利用できるプランが発表されました。2017年10月に正式版がリリースされ、その後も毎月機能追加や機能改善が行われ、現在もハイスピードで開発されています。 XDはUI/UXデザインに特化しており、デザイン制作はもちろんウェブ上で動作するプロトタイプまで作成できます。PhotoshopやIllustratorと比べるとデザインに関する機能は少なめですが、XD単体でデザインを完結させることも十分に可能です。また、起動が非常に早いことや、圧倒的に動作が軽いことも魅力です。macOS専用デザインツールのSketchも人気ですが、XDはmacOSとWindowsどちらでも動作します。 XDはデザインツールと称されていますが企画や仕様策定の段階から使用されることも増えており、筆者もワイヤーフレームなどの資料作成によく使用しています
webサイト・アプリ・雑誌・チラシなど媒体は問わず、見やすくて内容が伝わりやすいデザインする上で知っておきたい「近接」「整列」「反復」「対比」の4原則を紹介します。 近接 - PROXIMITY 関係性の近い各要素の距離を近づけて配置することで位置的にそれらが関係があるものと認識され、見ている人に理解されやすいデザイン・レイアウトを作ることができます。 その際、近接を上手く活用したいときに気を付けたいポイントは余白で、何となくでつけるのではなく関係性があるものとそうでないものでそれぞれ異なる余白にすることです。 上のイメージは様々なスポーツのボールイメージと競技名を並べたものですが、近接が考慮されていないためにそれぞれどのボールがどの競技なのかがわかりづらい印象があります。 これを近接を意識して配置し直したのが下のイメージで、関係性がわかりやすくなり上のイメージに比べてどのボールがどの競技
WordPressで地域の会社や店舗、サークル団体などの情報を提供するにあたって、どのような仕組みを作ったのか、どう運用しているのか、競合とどう差別化してるか的な話をしたりしなかったりします
Webサイトはあらゆる種類の情報にアクセスできます。ある企業についてもっと知りたい、商品を購入したい、寄付をしたい、リソースにアクセスしたいなど、探している情報を見つけるために私たちはサイトナビゲーションを頼っているのです。 多くのWebサイトが「十分」に機能するナビゲーションを備えており、ユーザーを必要な情報にアクセスさせることができます。しかし、それは試行錯誤を重ねたからなのです。この記事では、デザイナーがより効果的でわかりやすいナビゲーション体験を作り出せるようになるためのベストプラクティスをいくつか紹介します。 『ナビゲーションは検索よりも大切である』という記事で、著者のGerry McGovern氏は彼のチームが行った調査について紹介しており、「ユーザーの70%はリンクのクリックから始め、30%は検索を使用した」と述べています。また、「検索を使うよりもリンクをクリックするほうが簡
良質なアウトプットをするためには、もちろん日々のインプットも大事! でも、情報収集って大変そうですよね。 かくいう私も飽き性で、ブログをはじめた当初は記事を更新することすら続きませんでした・・。そんな私でも、情報収集を続けることができているのは「習慣化」をしたからなのです。 では習慣といっても、実際にどんなことをしているのか? 私の朝活をまるっとご紹介します! am7:00 朝の支度しながら“ラジオ”(80min)朝起きたら、まずはradikoを起動します。 チャンネルはJ-WAVEの「TOKYO MORNING RADIO」。 忙しい朝準備の時間に、自然と耳に入ってくるのがラジオの良いところですね。 ライフ&テクノロジーをテーマとしているので、話題のサービスの紹介、時々ベンチャー企業の社長が出てきたり、最新のテクノロジーやIoT関連の情報など、内容もクリエイティブ関連の人にはとても良い感
2018年になってここまで、ウェブデザインにとって驚くべき年を迎えています。これまで何年もかけて進化してきたデザインが、デザインシステムやタクタイルデザインのような新しいトレンド、また楽しく元気なレトロスタイルの復活などにつながっています。これまで以上に、ウェブデザインの現状と今後の流れを考えることが重要になってきます。 この記事では、2018年にもっとも影響を及ぼしている、6つの最新ウェブデザインのトレンドをまとめてご紹介します。 01. コンポーネントを元にした「デザインシステム」 まだデザインシステム(英: Design System)を導入していないなら、きっと今後数年以内に利用することになるでしょう。最新版となる 2017-18 Enterprise UX Industry Report によると、デザインシステムを利用していない企業の67%が、現在作成中と答えています。 デザイ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く