はてなブックマーク

こんにちは！3児のパパエンジニアの笹垣です。 以前こちらでWordPressのGutenbergブロック開発についてご紹介しましたが、その後実案件でカスタムブロックを使う機会があり、ブロック開発に加え、カスタム設定機能も追加したので合わせてご紹介します。 先日リリースしたARCHETYP Staffingのメディアサイト「ARCHETYP Staffing Magazine」では、インハウス・フリーランス・制作会社で働くクリエイターやエンジニア、企業のクリエイティブに対する思いなどをインタビューや対談形式で発信していますが、その記事で利用する会話モジュールが欲しいという要望から開発に至りました。 はじめに まずはじめに会話モジュールのカスタムブロックを作成します。 ※カスタムブロックの開発を行う上で必要な知識や環境についてはこちらを御覧ください。 会話ブロックの追加 前回の定義リスト（dl

こんにちは！3児のパパエンジニアの笹垣です。弊社では、WordPressをベースにしたサイト制作についてもよくご相談をいただくのですが、今回はWordPressバージョン5から導入された「Gutenberg」のカスタムブロック開発について備忘録も兼ねてご紹介します。 はじめに WordPressバージョン5が正式リリースされてから4か月。 最新機種の登場はもちろん、Mac OSやiOSのバージョンアップが大好物な自分にとって、WordPress v5リリース時はそこそこ興奮したのを覚えています。 WordPress 5.0 “ベボ” v4以前のWysiwygエディター（Classic Editor）は“ブログ”という側面が強く、エディターのツールバーと改行を駆使して記事を書く形で、行間の調整に苦労したり編集者ごとのトンマナの統一が難しく、案件によってはカスタムフィールドを複数作成して回避す

こんにちは。フロントエンドエンジニアの木下です。 HTML5が勧告された日(2014年10月28日)は自分の誕生日（ビルゲイツと一緒）だったので、何だか運命的なものを感じながら毎日HTML/CSS/JSを書いています。 アーキタイプブログではテック系の記事を書いていこうと思っています。よろしくおねがいします！ はじめに みなさんCSSは書いていますか？ HTML/CSSのコーディングはエンジニアではなくデザイナーの領域という会社も増えていますし、そうでなくても以前より開発時にデザイナーとエンジニアが連携する場面は増えているので、コードを目にする機会は多いと思います。 今回はwebページやアプリケーションのレイアウトを組む際の手法についてのお話です。 今どきといえばフレックスボックスやグリッドレイアウト。だけどテーブルレイアウトだってまだ使われているんだよ、ということでまずはこれまでの歴史を

みなさんこんにちは 齋藤です。 先日、同業種であり個人的にも交流のあるイムジョンホ氏＆梅津 岳城氏たちが経営するmount incの10周年パーティーにお呼ばれしました。 笑いあり感動ありの素敵なパーティーで久々に業界の方々と話す機会がありました。 そんなこんな（？）でタイトルにもある「10年以上最前線で活躍し続ける東京のWeb制作会社」を 僕の完全なる独断と偏見でまとめさせていただきました。 では、張り切っていってみましょう。 mount inc 先にも書かせていただいた会社です。 何と言っても特徴は圧倒的にクリエイティブにこだわった妥協ないアウトプットじゃないでしょうか。 ワークスを見てもらえれば一目瞭然ですね。 昔、イムジョンホ氏と話したときに、色んな仕事の状況全てひっくるめていいアウトプットすることが大事。言い訳しない。 と言っていたのが印象的でした。今回のパーティーでもすごく素敵

こんにちは、デザイナーのもとまつです。 さて、ARCHETYPではWEBサイト制作のご依頼が多いのですが、最近プロトタイプ制作の案件もお声がけいただきます。 プロトタイピングツールの「Adobe XD」と「InVision」を軽く使ってみたので、感触を簡単にまとめてみました。 今回はプロトタイピングツールをまだ触ったことがない方向けです。 この記事では、以下の状況を想定しています。 状況 ・Adobeユーザー（普段PhotoshopやIllustratorを使っている） ・各画面デザインは既に制作済み ・各画面の遷移を設定する ・共有リンクで担当者が確認できるようにする ・共有リンクにパスワードをかける ・モバイルデバイス用のデザインは実機で確認できる — Adobe XD 操作性　　　　　　 ：★★★★☆ トランジション　　 ：★★☆☆☆ Photoshopとの連携：★★★☆☆ コスト　

こんにちは。 すっかり寒くなってきましたね。齋藤です。 今回のテーマは、撮影ディレクションについてです。 いやいや、UI/ UXと関係ないじゃん。って思われるかもしれませんが、UXの設計において、コンテンツは非常に大事なもの。そのコンテンツを作成する際に、写真や動画を撮ることがあります。 じゃぁ、その写真や動画はどうやって作るのか？…という流れで（半分こじつけですが）、このテーマで書きたいと思います。 — 前提として、僕は特に誰かに付いて撮影を学んだ経験はありません。 現場で経験しながら今までやってきました。 とは言え、色々な制作部の方やカメラマン、監督と一緒にお仕事をさせていただく中で、良いところ・悪いところ、Web特有のポイントなどなど、試行錯誤してきました。 それらを僕なりに少しまとめてみました。 前提として、「ムービー（動画）」と「スチル（静止画）」に大きく分かれるかと思いますが、

こんにちは、デザイナーのもとまつです。 はやいもので、入社3年目、デザイナー歴9年目になります。 さて。 デザイナーのみなさまの中には「早くデザインを仕上げるにはどうしたらいいか」と考えたことがある方も多いのではないでしょうか。 かく言う私もその一人でした。 上司や周りの方から「デザインが遅い」と指摘を受け、 デザインを早く仕上げることを、ここ数年の目標にかかげてやってきました。 その甲斐あってか、最近「早いね」と言っていただけることがちょこちょこ増えてきたため この機会に振り返ってみたいと思います。 1. 手を動かす間は考えない デザインの作業自体は、案件のお話を聞いた時からはじまります。 ただ、その前の準備がとても大切ではないでしょうか。 具体的には、「良いデザインをたくさん見ておく」という日頃の準備と、 「デスクについたらすぐデザインを始められる」という案件の準備です。 考えるという

こんにちは。デザイナーの赤堀です。 私事ですが、制作会社に転職して1年が経ちました。 それまでは新卒からずっと事業系の会社で働いておりました。 いわゆる「事業系」「受託系」の違いで、こんな話を耳にしたことはないでしょうか。 「事業系はUI/UXデザインに強く、制作系はビジュアルデザインや開発などスキル方面に強い」と。 （一概に上記がすべてではありませんが、私は制作会社で働いてみたいと一念発起し転職をしました。） しかしながら、そういった言説も古く感じる今日この頃。 現在はUI/UXに秀でた受託制作会社が多くあることはもちろん、そうした会社さんが発信されている情報から、私自身も日々多くの知見をいただいています。 今回はその中から、私も依頼してみたいと思うUI/UX会社8選をご紹介いたします！ — 株式会社グッドパッチ http://goodpatch.com/jp 受託制作会社でUI/UXと

ARCHETYPの広報キクチです。 ARCHETYPメンバーおすすめ！SNS系Webサービスについてまとめてみました。 時間指定で投稿が可能になるものや、 複数のSNSのフィールド一覧がブラウザで一覧表示できるものなど 無料で使える便利なサービスをご紹介します。 HootSuite ソーシャルメディアの運用ツールとして、海外でも国内でも最も人気の高いツールの一つです。HootSuiteは、無料でも利用できますが、有料版では解析ツールなど高度な機能を利用することができます。無料バージョンでも、複数のソーシャルメディアアカウントの運用をするための十分な機能が備わっています。HootSuiteでは、ダッシュボードと呼ばれる画面から、複数のソーシャルメディアの情報を確認できるだけでなく、投稿や返信などの各種操作も行えます。 CROWY CROWYは和製Hootsuiteなどと呼ばれることもあり、日