生まれ変わったらデザインシステムになりたいと思っているくらい、デザインシステムが好きなエンジニアの乗田です。 僕の入社の経緯や業務内容についてはこちらからご覧いただけます！ デザインシステムとは デザインシステムとは、ソフトウェアやグラフィックなどにおけるデザインの原則や指針と、それらを実現するための仕組みの集合体です。デザインシステムのメリットは、低コストで高速に一貫性のあるデザインを実現しやすくなるという点にあります。 一般的にデザイン原則にはタイポグラフィ・カラーシステムやボイス&トーンなどが含まれ、仕組みにはコードベースのUIコンポーネントやデザイントークンなどが含まれます。 しかしデザインシステムにおける必須要素の定義はありません。それ故にデザインシステムは、各組織にとって必要なデザイン原則やデザインアセットが集合した物と言い換えることもできるでしょう。 古い物ですと1975年に
Goodpatch新卒UIデザイン研修の設計—ソフトウェアデザイン概論と基礎理論—｜Goodpatch Blog グッドパッチブログ
Goodpatchでは職種ごとにさまざまな新人研修プログラムを用意しています。2020年の新卒UIデザイナー向けには、4月から6月にかけてUIデザインに関する基礎的な講義や演習、課題制作といった集中的な研修を行い、UIデザイナーとして必要な基礎知識を身につけてもらいました。 UIデザイン研修といってもいくつかにコースが分かれており、今回私が講師として担当した部分では「ソフトウェアデザイン」をテーマに講義を行いました。 以下の講義のうち私が担当した、ソフトウェアデザイン概論、インタラクションデザイン基礎、モードレスデザイン基礎、UIモデリング基礎について簡単にご紹介いたします。 【関連記事】デザイン思考の研修おすすめ10選！ 期待できる効果や選ぶポイントは？ UIデザイン研修—ソフトウェアデザイン編—講義シラバス ソフトウェアデザイン講義の設計 UIデザイン新人研修は全体構成を「ビジュアルデ
［インタビュー］ゲーム業界でがんばっ定年！ サクラ大戦をドット絵から“今の感じ”に転換させたグラフィッカー，吉田 徹氏（58歳）
［インタビュー］ゲーム業界でがんばっ定年！ サクラ大戦をドット絵から“今の感じ”に転換させたグラフィッカー，吉田 徹氏（58歳） 編集部：楽器 カメラマン：永山 亘 セガ ジャパンアジアパブリッシング事業本部 マーケティング本部 Webデザイン部 部長の吉田 徹氏 ゲーム業界では秀作を生んだクリエイターが名を上げ，いつしか会社の顔となり，界隈の代弁者として，業界の印象を形成してきた。 しかし，彼らの総数は業界従事者の1％ほどだろう。その裏には開発のみならず，広報や経理，社内エンジニアにカスタマーサポートなど，名を上げずとも人生を生きる99％側の“名もなき戦士たち”がいる。 言い換えればそれは我々であり，世界の大多数だ。 ゲーム業界自体，未成熟ゆえの輝きがあった昭和・平成時代とは違い，今では就業規則に福利厚生にコンプライアンスにと成熟した。大手を中心とする一部メーカーでは徐々に“定年退職者”
働きながら子どもの不登校と向き合い「キャリアは常に右肩上がりじゃなくてもいい」と気付いた #仕事と子ども - りっすん by イーアイデム
フリーランスで編集やWebデザインの仕事をしているbranco MICHIYOさんに、「子どもの不登校と仕事の両立経験」についてつづっていただきました。 お子さんが小学校に入学して少し余裕が生まれ、キャリアアップを目指して動き始めたタイミングで始まった不登校。お子さんと向き合う時間の中で、自身の働き方についてあらためて見つめ直したといいます。 ＊＊＊ 家庭との両立でキャパオーバーになり「仕事」を減らすことに 第一子が1歳になるタイミングで転職した事業会社に、私は唯一のデザイナー兼広報の正社員として入社した。唯一のデザイン職採用というプレッシャーの中、「結果を残したい」と意気込んでいたが、予想以上に子育てとの両立は大変だった。 とにかく子どもが寝ない。さらには環境の変化に敏感で、しょっちゅう熱を出す。毎週の病院通い、遅刻早退は当たり前。一方で夫は不規則なシフト勤務で急な休みが取りづらく、さら
【PV数・収益公開】はてなブログ初心者が100記事書くといくら・いつから稼げるの？｜収益化手順・アクセスの伸ばし方も詳しく解説 - redoブログ
「無料版はてなブログでも収益化はできるのか」「いつから収益化できるのか」といった疑問や今までブログをやってきたけど収益化が難しいという悩みを持っている方へ向けて、実際に「ブログ副業」している私が昨年「無料版はてなブログ」で100記事書いた際のアクセス数(PV数)と収益について解説します！ 結論を先にいうと「無料版はてなブログでも収益化は可能」です。 ただし、ブログのジャンル選定やライティングスキル、キーワード選定などある程度のノウハウは必要です。 無料版であれば仮に失敗しても一切リスクがありませんし、実際に私が無料版で収益化を成功させています。 お金を増やす方法として投資などもありますが、リスク管理が必須になります。一方で、ブログ副業はいっさいその必要はありませんので、ノーリスクハイリターンも期待できるという魅力があります。 現在、ブログを書いている方やこれからブログを始めようと考えている
他人の評価を気にしてばかりだったわたしが仕事選びの“軸”を見つけ、理想の暮らしにたどり着くまで - りっすん by イーアイデム
「自分に合った仕事」や「やりたい仕事」が分からずモヤモヤしていませんか。 現在、鳥取に本社がある会社でリモート勤務をしながら、富山の戸建てで猫と暮らしているなつめさん。今でこそ理想的な生活を送りながら“自分に合った”仕事ができていると感じていますが、数年前までは仕事選びの「軸」が分からず転職を繰り返し、そんな自分に劣等感を抱いていたそう。 コロナ禍をきっかけに「自分にとっての幸せってなんだろう？」と考え始め、働き方を含む「理想の暮らし」と向き合い、「軸」を見付けるまでの過程を振り返っていただきました。 東京生まれ東京育ちのわたしが、縁もゆかりもない土地・富山県に単身移住し、完全リモートワークの会社で働きはじめたのは2023年春のこと。 「なぜ富山へ？」というよく聞かれる質問に対しては必ず「自然豊かな環境で猫とこころ穏やかに暮らしながら、自分にあった仕事をしたかったから」と答えてきた。そして
CSSにおけるマージンの相殺を徹底解説
CSSにおけるマージンの相殺は何か、どういう条件で起こり、どのように相殺されるのか、また相殺を回避する方法などを紹介します。 下と上のマージンの相殺は単純ですが、マージン値が異なる場合、入れ子の場合、複数の場合、同方向の場合、負のマージンの場合、パディングやボーダーがある場合など、実装に伴うさまざまな例を解説します。 この記事を読むと、マージンの相殺がどのように機能するかがよく分かるようになり、悩むことはなくなります。 The Rules of Margin Collapse by Josh W. Comeau 下記は各ポイントを意訳したものです。 デモは元記事ではインタラクティブですが、Gifアニメにしています。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 垂直マージンのみが相殺される 隣接する要素のみが相殺される より大きなマージンが勝つ 入れ子は
2020年5月26日 Webデザイン, インスピレーション Webデザインを学ぼうと思っても、オンラインで学べるのはHTMLやCSSのコーディングであることが多く、デザイン自体を学べるサービスは結構少ないです。そこで今回は無料でデザインを学んだり、作品制作の手助けをしてくれるサービスを紹介します。 ↑私が10年以上利用している会計ソフト！ chot.design chot.designは無料で学べるデザインの学習サイト。レッスンは5〜10分程度で読めるので、スキマ時間を使って勉強できます。名刺制作やバナー制作など、初心者が取り組みやすいものが多い印象。レッスン自体は無料ですが、会員登録すると進捗確認ができたり、Q&Aフォーラムで質問できるようになります。まずはここからはじめてみるといいですね！ カリキュラム内容一例 バナー制作テクニック アイコン制作テクニック 名刺制作テクニック UI/U
この記事は下記の記事に触発されて、逆方向の「エンジニアの自分がどういうモチベーションでどうデザインの勉強をしていったか」というのを語ってみよう！という内容となっております。 あと最近よく「なんでデザインし始めたの？」「どうやって勉強してるの？」という質問をいただく機会が増えてきたので、それへのアンサーともなればなと思います。 なぜデザインを勉強し始めたのか結論から言うと必要に駆られて勉強し始めました。 前職はスタートアップに勤めていたのですが、当時作り始めていた新規サービスに携わっている人はエンジニア2名 + デザイナー1名という少数のチームでした。 ただデザイナーともう一人のエンジニアは他のプロジェクトにかかりきり…なので一時期この新規サービスの開発は私だけという状況でした。 そこで困ったのがデザインがないこと。大まかなワイヤーフレームは握っていましたが、デザインがないのでフロントの仕事
【デザイン初心者向け】入社して初めて作成したアイキャッチ、先輩からのフィードバックをすべて公開します！ こんにちは！ そして、初めまして！ 今年の6月より社内制作チームのデザイナーとして入社しました、えびちゃんと申します。LIGのデザインスクール「デジタルハリウッドSTUDIO by LIG」でWebデザインを学び、未経験でLIGに入社いたしました！ 社内制作チームでは、LIGブログの記事の一番上やサムネイルとして表示される画像（アイキャッチと呼んでいます）やバナーなど、社内で使用する制作物を作成しています。 私が入社して初めて作成したのは、「現役デザイナー厳選！デザインを勉強したい人におすすめの本23選」という記事のアイキャッチでした。このアイキャッチ制作には、デザイン初心者が陥る悩み・学びがたくさん詰まっていました。そこで、先輩デザイナーからフィードバックを受け完成するまでの過程を共有
デザイナーがデザインツールを使わずに、React を使ってデザインした話 | MEDLEY Developer Portal
2020-06-19デザイナーがデザインツールを使わずに、React を使ってデザインした話メドレーのデザイナー酒井です。最近、JobMedleyからCLINICSに異動しました。 自分はデザインはもちろん、HTML/CSS/JS 実装してプルリク送ったりしているちょっとフロントエンド実装領域に軸足が寄ったタイプのデザイナーです。 ここでは以前所属していた JobMedley 事業部の話をさせていただきます。 当時、JobMedley の社内システムのリニューアルプロジェクトにデザイナーとして参加していました。通常、デザイナーがデザインをするときには Skecth や Figma のようなデザインツールを利用するのが一般的かと思います。 弊社でも基本的にはデザインツールでデザインを行うことが多いのですが、プロジェクトによっては、よりリアルなモックアップが必要なため、デザイナー自身がコーディ
達人出版会
探検! Python Flask Robert Picard, 濱野 司(訳) BareMetalで遊ぶ Raspberry Pi 西永俊文 なるほどUnixプロセス ― Rubyで学ぶUnixの基礎 Jesse Storimer, 島田浩二(翻訳), 角谷信太郎(翻訳) 知る、読む、使う！ オープンソースライセンス 可知豊 きつねさんでもわかるLLVM 柏木餅子, 風薬 デザインディレクション・ブック 橋本 陽夫 現場のプロがやさしく書いたWebサイトの分析・改善の教科書【改訂3版 GA4対応】 小川 卓 解釈可能なAI Ajay Thampi(著), 松田晃一(翻訳) PowerPoint 目指せ達人 基本&活用術 Office 2021 & Microsoft 365対応 PowerPoint基本＆活用術編集部 ランサムウェア対策 実践ガイド 田中啓介, 山重徹 TODによるサステナ
オウンドメディアサイトの評価に役立つGoogle Analytics 4のカスタムレポート作成ガイド（寄稿：小川卓） - はてなビジネスブログ
株式会社HAPPY ANALYTICSの小川卓（id:ryuka01）です。 Google Analytics 4には多様なレポートや機能が備わっており、どれを利用すれば良いか迷うことが少なくありません。複数のレポートを行き来しながら見るのも手間ですし、改善に直接役立ちにくいレポートや指標もあります。 そこで今回は、オウンドメディア向けのGA4カスタムレポートの作成方法と見方について紹介いたします。まずはこのカスタムレポートを見ておけば、各記事の評価が適切に行えるようになります。 カスタムレポートとは？ 作成するカスタムレポート カスタムレポートを見る上でのポイント カスタムレポートの作成方法 最後に カスタムレポートとは？ GA4のレポート内にある機能で、任意のディメンションと指標を選んで表を作成することができます。必要な項目だけを表示することができるため、必要なデータに絞り込むことが可
noteの「あつ森」UXライティング解説が大反響！ naoさんに聞く、UXライティング力の鍛え方 | キャリアハック（CAREER HACK）
noteでの「『あつまれ どうぶつの森』の世界観をつくるUXライティング」をはじめ、UXライティング解説記事が反響を呼ぶ「nao」こと宮崎直人さん。じつはユニコーンの仲間入りを果たしたテック企業「Paidy」で働くUXライター・コピーライターだ。彼が考える、UXライティングとは？そして、その鍛え方とは？ 【前編】noteの「あつ森」UXライティング解説が大反響！ naoさんに聞く、UXライティング力の鍛え方 【後編】「あと払い」をリードするテック企業「Paidy」が、UXライターを採用。宮崎直人が広げる言葉の可能性 コピーライティングとUXライティングの違いとは？ もともと宮崎さんはコピーライターとしてキャリアを積み、現在は、Paidy（ペイディ）にてUXライティングにも実務で関わっていると伺いました。そもそも「コピーライティング」と「UXライティング」の違いとは？ ここは私のなかでは明確
SEOの学び方（上級編） - SEMリサーチ
要約 SEOのスキルを伸ばすための最低条件 「Webがとにかく好き」 「複数のスキルを持つ、または複数の業界で働いた豊富な経験がある」 「自分の頭で考える、自分で手を動かす」 SEO上級者を目指すためのアドバイス Googleの講演を聴いた直後に、それを再演する 情報を覚えるのではなく「なぜ」を常に考える 悪いSEOをしているWebサイトも研究する 様々な実験を行いながら学ぶ 問題が発生しているWebサイトの原因探し行う おまけ1：意味不明な専門用語を使わないこと おまけ2：参加者属性が制限された勉強会に参加する 要約 SEOのスキルをステップアップするためのアドバイス Googleが言うから正しいのではない。検索エンジン、検索利用者、サイト運営者 三者の立場を考えながら、何が適切か考える癖をつける 自分自身でサイトを運営して、学び続ける姿勢が最も大切 先日、SEOをこれから学び始める人向
【2022年最新版】デザインマネージャーが厳選したおすすめUI/UX書籍36選！～これから始める方必見～ - RAKUS Developers Blog | ラクス エンジニアブログ
こんにちは、クリエイティブ課 木村圭です。 クリエイティブ課は、ラクスグループ内で提供しているサービスに関するWebサイトやパンフレットなどのデザイン業務を担っています。 現在、マネージャー職をしていますが、前職までUI/UXデザイナーをしておりました。 僕自身が、これまで学習した書籍や最新の関連書籍を含め、ご紹介します。 これから、UI/UXデザイナーを目指したい方やデザインにご興味のある方なども含め、ご参考になればと思います。 最初に読んでほしいUI/UX書籍はこれだ! ノンデザイナーでもわかる UX+理論で作るWebデザイン UI/UXデザインの原則 UIデザイン みんなで考え、カイゼンする。 SF映画で学ぶインタフェースデザイン アイデアと想像力を鍛え上げるための141のレッスン ほんとに使える「ユーザビリティ」 -より良いデザインへのシンプルなアプローチ UI GRAPHICS
複雑な内容も一枚でスッキリ！ “概念マッピング”で学習効率が劇的に変わる理由 - STUDY HACKER（スタディーハッカー）｜社会人の勉強法＆英語学習
「複雑な内容が頭に入ってこなくて、勉強のモチベーションが保てない」 「何度テキストを読んでも、一向に覚えられない」 「わからない」「覚えられない」という壁は、勉強している人の多くが直面するもの。何度テキストを読んでも、まとめノートをつくって復習をしても克服できず、諦めていませんか？ 勉強内容が定着しない場合、情報の整理ができていない可能性があります。頭のなかがごちゃごちゃしたままでは、十分な理解や記憶定着がしづらいのです。 そこで本記事では、学習内容を整理するために「概念マッピング」をご提案します。情報を視覚的に整理することで、内容を理解し記憶しやすくする方法です。 基本的な作成手順と、デジタルツールの活用例もご紹介します。 概念マップとは何か、その学習効果 概念マップの作成方法 「概念ラベル」の関係性を視覚的にとらえられた 概念マッピングにおすすめのツール2つ 1. CmapTools
Making of “Kindolphin” | 麦 Baku
group_inou / HAPPENING group_inouとAC部のミュージックビデオ作品『HAPPENING』をWebアプリ化しました。デザインと実装は僕一人です。元のビデオがGIFアニメ縦長漫画が歌詞に合わせて自動スクロールする仕様だったので、GIFの質感をロスレスかつ自分のペースで楽しめるように、某電子書籍アプリのような体裁でインタラクションできるようにした次第です。 We have just released a Webtoon app that highlights the lyrics of group_inou's music video "HAPPENING". You can switch between Japanese/English, change colors, stop and have a close look, or just scratch and
「はてなブログ」のアクセス数・PVを増やすWebデザイン「ブログカスタマイズ」方法まとめ - redoブログ
「はてなブログ」のデザインやレイアウトを整えたいと考えている方へ向けて、今まで私が紹介してきたWebデザインの「ブログカスタマイズ集」をまとめました。 ブログのサイトの見た目は「ユーザーの滞在率」や「直帰率」などにも影響し、SEOの観点からもとても大切です。 「デザインCSS」と「HTML」を制する者がサイトレイアウトを制します。色や配置、形、文字など工夫次第で色々な設定ができ、コードの内容がわかってくると楽しいものです。 今回ご紹介するカスタマイズ方法はすべて無料で実装可能なカスタマイズです。中でも厳選して、「HTML」「CSS」のプログラミングコードを使用するものを中心にまとめています。 私は大学院時代にはプログラミングで「Fortran」や「C」などを使っていたので、割と抵抗はない方なのですが、プログラミングに抵抗がある人へ向けて、初心者でもコピペでできるようにコードを紹介しています
はじめまして、nanocolorの川端(@nanocolorkwbt)です。 僕は主にWEBサイトやランディングページを制作するデザイン業務の仕事をしています。しかし弊社の主軸サービスはマーケティング支援と運用です。 作成した制作物を活用しビジネスに貢献するのが仕事です。これがサービスの軸ですが、制作会社なのに仕事の流れに制作を含めていません。制作はとても大切な仕事です。が、しかし制作会社が制作する事は当たり前であり、今や誰でもサイトは作れる時代です。 制作会社やデザイナーの生み出す価値とは？ WEBサイトもLPも冊子もロゴも行き着く先は顧客ビジネスへの貢献です。トレンドばかりを追い、確証のない作り手のこだわりでは本質的な顧客へのビジネス的貢献は生まれない。そう感じた僕は『制作業務のみ』の仕事をあまりを大切にはしていません。 デザイナーにもマーケティングの視点をデザイナーがデザインを制作す
2023年、生成AIへの注目度が一気に上がったとき、「AIに人間の仕事が奪われるのでは？」という議論がウェブ制作界隈でも巻き起こった。 その後、「AIは仕事を楽にしてくれるもの」「AIは人間の仕事を奪わない」という考えが主流となり、一旦は落ち着いているように思う。 あくまでSNSで観測している範囲だが、ウェブ制作界隈は生成AIに対する発信が少なく、他分野と比べてあまり強い関心を持っていないようにも見える。特にデザイナーの関心が低く、当社内でもエンジニアとライターは積極的に生成AIを使っている一方で、デザイナーの生成AI活用は緩やかである。 それだけデザイナーの業務は複雑性が高く今の生成AIでは対処しにくい、ということでもあるのだろう。また、デザイナーの職業選択動機やこれまで培ってきた努力を根こそぎ否定しかねない存在だから真剣に向き合いたくないという緩やかな抵抗感、意外と保守的で価値観や手法
【意外と教わらない】Webデザイナーなら知っておくべき画面サイズのお話。 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。デザイナーのまいまいです🦀 みなさん、駆け出しのWebデザイナーのころってどんなことを学びましたか？ デザインツールの使い方、フォント、レイアウト、配色、コーディング、etc……。 いろんなことを学びますよね。今回は、「めちゃくちゃ大事なのに言葉でサラッと説明するのが難しい」「はじめからきちんと理解しておけば……」と私が感じた画面サイズについて書きます！ 独学でつまずいていませんか？ Webデザインの基本を効率的に学びたい、プロのデザイナーに教えてもらいたい……という方は、「スクールでの勉強」もおすすめです。LIGでもWebクリエイター育成スクール「デジタルハリウッドSTUDIO by LIG」を運営しております。「今すぐスクールの概要を知りたい！」という方は、ぜひこちらより資料をご請求ください。 カンバスサイズ PhotoshopもしくはXDやFigmaでデザインをつくると
達人出版会
探検! Python Flask Robert Picard, 濱野 司(訳) BareMetalで遊ぶ Raspberry Pi 西永俊文 なるほどUnixプロセス ― Rubyで学ぶUnixの基礎 Jesse Storimer, 島田浩二(翻訳), 角谷信太郎(翻訳) 知る、読む、使う！ オープンソースライセンス 可知豊 きつねさんでもわかるLLVM 柏木餅子, 風薬 手を動かしてわかるクリーンアーキテクチャ ヘキサゴナルアーキテクチャによるクリーンなアプリケーション開発 Tom Hombergs(著), 須田智之(訳) 詳解 AWS CloudFormation 潮村 哲 その決定に根拠はありますか？ 確率思考でビジネスの成果を確実化するエビデンス・ベースド・マーケティング 小川 貴史, 山本 寛 プログラマーのためのVisual Studio Codeの教科書【改訂2版】 川崎 庸
インタラクションのあるUIを作っていると、UIパーツのみからは挙動を読み解けない場合があって、そういうときには、一言説明を添える、ということをやる。 こういうときに、どこにどれくらいの説明があれば必要かつ十分か、ということを学べる機会はあまりない気がする。 アルバイト氏のPull Requestのレビューをしていたら、これだと何が起きるかわからないので説明を添えたいよね〜って話をしていたのだけど、そういえばこういうことはどこで学べるのだっけ?というのが気になってきたのだった。 ブログチームでブログを作っていた頃には、編集メンバーが画面のレビューをしてくれて、ここのUIの文言はこれくらいのことを書けば必要かつ十分で、ヘルプの言い回しや告知とも整合性が取れてよいのではないでしょうか、みたいなことを一緒に考えてくれていて、勉強になっていた。 ブログのサイドバーから、説明文を消し去ると、フォームに
ウェブ制作の仕事をしていると、「コーポレートサイト」「オウンドメディア」「製品サイト」「ランディングページ」といった言葉を当たり前のように耳にします。 でもある時、「コーポレートサイトって何だろう？」と思いました。 言葉をそのまま直訳すれば「企業サイト」ということになりますが、そうであるならば、企業が作るオウンドメディアや製品サイトやランディングページもコーポレートサイトではないでしょうか。なぜこれらのウェブサイトのことはコーポレートサイトと呼ばないのでしょうか。 この疑問を切っ掛けに、企業サイトにまつわる数々の言葉の定義をハッキリさせようと考えて、この記事を書きました。 調べてみると、「この言葉はこういう定義じゃ」と決めてくれるウェブサイトの神様のような方がいるわけでもなく、それぞれの会社・現場・人・文脈に応じて、ある程度の解釈の幅をもって使われているのが実状です。 そのためこちらでご紹
Webデザインツールはどれを使えばいいの？
この記事について この記事は、スマートフォン時代のWebデザインスクール や Web制作の基礎から学べる「Webコーディングスクール」 の資料制作をお手伝いして頂いているemiさんによる寄稿記事です。 emiと申します。USAGI DESIGN emi.というサイトでWebデザインやコーディング練習用のデザインデータを配布しています。普段はWebデザインやコーディング、メンターなどをしております。 Webデザインのためのツール（アプリ）はいくつもあるため、Webデザインを勉強し始めたばかりの方は何を使っていいのか迷うと思います。 この記事ではデザインツールの特徴だけでなく、「カード型UIデザイン」を例にWebサイトのデザイン制作に使用する機能の比較をしたり、アプリ間の連携についても触れていきます。 デザインツールの種類デザインツールそれぞれの特徴Webサイトのデザイン制作に使用する機能の比
日々数え切れないほど更新されていくSNSやウェブメディアの発信に、何度人生を繰り返しても追いきれないほど積み重なっていく本や映像作品などの新旧の知的生産の数々。まるで荒波の立つ海のような現代の情報環境に溺れず、呑まれず、自分自身にとって必要な「問い」にたどり着くための“航海術”とは？ MIMIGURI代表取締役Co-CEO／東京大学大学院情報学環特任助教で、人と組織の創造性を高める方法論を研究している安斎勇樹さんが、ピーター・ドラッカー以来の20世紀的な「選択と集中」方式のマネジメント論の限界と、21世紀に最適な「分散と修繕」戦略のかたちを考えます。 混迷する情報社会に求められる、新たな羅針盤 VUCAの時代。人生100年時代。終身雇用の終焉。一寸先の潮目が読めない時代において、私たちは長い航海にどのように備えればよいのか。いま、新たな羅針盤が求められている。 とりわけ「情報」との付き合い
🍃はじめに 「これからのWebコーディングのスキルは、はじめからJamstack志向でも良いのではないか？」 と考えたことが本記事執筆の理由です。 先日エビスコムさまから作って学ぶNext.js/React Webサイト構築が発刊され、これであれば普段Webコーディングを専門にされている方がJamstackに入門できると考えました。 一方でJamstackに関連する資料は中上級者向けのものが多く、初学者向けの体系だった資料がありません。 この課題を解決すべく作って学ぶNext.js/React Webサイト構築を目標に掲げ、それまでの道を整備したいと思い本記事を書くに至りました。 🙋対象 これからフロントエンド(Jamstack)を勉強される方 コーディングの基礎を整理したい初中級者 Macユーザー(Windowsでも可能ですが適宜読替えが発生する可能性があります) 🏁ゴール 作って
ソフトウェアデザインにおける構造設計を実践！マネーフォワードさんとワークショップを開催しました｜Goodpatch Blog グッドパッチブログ
Goodpatchでは、UIの構造設計を重視したデザインプロセス「モデルベースUIデザイン」を推進しています。最初にコンセプト定義やユースケースを定義し、情報整理をして最終的に機能やビジュアルなどの具体的なところを詰めていく考えをとっていくプロセスです。 今回は、マネーフォワードさんと「デジタルプロダクトのUI設計のプロセスと考え方を学び、実践することでスキルのベースを身につけること」をテーマに、モデルベースUIデザインについて理解・実践するワークショップを開催しました。本記事では開催の背景から当日の様子をご紹介します。 参加いただいたマネーフォワードのUI/UXデザイナーさんによるnoteもぜひご覧ください！ マネーフォワードがGoodpatchさんとUIデザインワークショップを実施しました！ ご相談いただいた背景 「お金を前へ。人生をもっと前へ。」をミッションに掲げる株式会社マネーフォ
フルスタック、VPoE、デザインエンジニア、フロントエンドの極み──4つのパターンで語る「フロントエンドキャリアの分岐点」 - TECH PLAY Magazine
TECH PLAYERが「なりたい姿」を叶えるために、背中を後押しするTECH PLAY Talkシリーズ。第一弾はフロントエンジニアとして紆余曲折を経てきた『フルスタックパターン』小林泰士さん、『VPoEパターン』あほむさん、『デザイナーパターン』ymrlさん、『フロントエンドの極みパターン』mizchiさん、4人の現役＆元フロントエンドエンジニアの「キャリアの分岐点」を紹介する キャリアの分岐点#1『フロントエンド→フルスタックパターン』小林 泰士さん 株式会社NEW SHIP CEO 小林泰士さん フリーランスのコーダーからキャリアをスタート トップバッターで登壇したのは、NEW SHIP CEO 小林泰士さん。業務委託でROXX、シェアダイン、APERITEが運営するワインのサブスクサービス「ポケットソムリエ」などの開発に携わっている。 大学時代は広報やライターといった活動と平行し
風船屋さんを支える技術。200時間でゼロからweb検索システムを構築した裏側のすべて。(Next.js, Firebase...)
はじめに こんにちは、フロントエンドエンジニアの多田です。 フロントエンド領域の勉強をはじめて 1 年が経ち、今回個人でゼロからアニプラさん(バルーンショップを経営してる会社)のバルーンサイトの検索システムを作らせていただく機会に恵まれました。 開発にかけられる総時間が 200 時間(つまり工数 1 人月ちょいぐらい、、)というだいぶヤバめなチャレンジングな時間的制約の中、要件定義・デザイン・フロントエンド・バックエンド・インフラ周りまで通して全て 1 人で開発し、完成させることができました。 はじめてfigmaでデザインしてみた アニプラさんより記事を書く許可をいただいたので、開発の裏側の話を記事にまとめます。 開発したサイトはこちら ↓ (今回の記事のメインとなる Next.js で作ったバルーンプラン一覧検索画面) 本記事の内容 (ほぼ)個人開発においての、要件定義 → デザイン →
コロナ禍により、広く普及したもののひとつが在宅ワーク。副業を推奨する企業も徐々に増加し、筆者が今まさに行っている「ライター業」などが、一部調査では人気職種としてランクインしています。 しかしながら、在宅でできる仕事は「誰でもできる仕事」では決してありません。寧ろ、参入障壁が低いからこそ起きてしまう「搾取」の現場も存在します。それについて、かけだしちゃんさんが100回に分けて実録漫画として紹介しました。 「未経験から100話でキラキラWEBデザイナーを諦めるかけだしちゃん」と題して、今年（2022年）1月から約3か月をかけ漫画作品を投稿したかけだしちゃんさん。 自身がwebデザイナーを志望するようになった背景から、最終的に断念するまでの2年間を100回にわたるエピソードで紹介しています。 かけだしちゃんさんもまた、コロナ禍により在宅ワークに注目するようになったひとり。はじめたきっかけは「危機
コーディングもするWebデザイナーがSTUDIOでWebサイトを作ってみたPodcastでノーコードツールでWebサイトを作ってみよう！STUDIOって最近よく聞くよねー！気になるねー！というお話になり、実際にひとつ簡単なWebサイトを作る予定もあったので、STUDIO使って制作してみました！ STUDIOとは？STUDIOは、HTMLやCSSでコードを記述する必要のない、ノーコードでのWebサイトデザインや制作ができる国産ツールです。サーバーの設定も不要で、STUDIOだけで設計から制作、公開までを一括管理できます。 日本製というのがポイントで、海外のツールやテンプレートで作ったWebサイトを日本語にした途端にダサくなったりしちゃうんですよね。しかしSTUDIOではモリサワが提供する500種類以上のフォントが使えるため、日本語でもデザイン性の高いWebサイトが作れます。 STUDIOでW
みんなが使えるカルーセルUIを考える | CyberAgent Developers Blog
Ameba事業部の谷（@hiloki）です。Amebaのデザインシステム Spindleのマネージャーをしつつ、UIの設計・開発をしています。 2021年は多くのガイドラインやUIコンポーネント設計・開発に取り組んできました。この記事ではCyberAgent Developers Advent Calendar 2021の3日目の記事として1年を振り返り、特に考えることの多かったカルーセルUI について、その設計視点やアクセシビリティを考えてみました。 カルーセルUI とは あらためてこの記事におけるカルーセルUI（以下「カルーセル」と呼称します）を定義します。 『デザイニング・インターフェイス（第2版）』におけるカルーセルの定義を引用すると下記のように説明されています。 視覚的に興味を引くことができる項目のリストを、横一列またはアーチ状に配置し、画像のサムネイルを左右にスクロールまたはス
これからオウンドメディアを始めたい、あるいは既存のオウンドメディアをリニューアルしたいという時、CMSの選定は今後の運用体制にも影響する重要な検討課題となります。今回は、オープンソースのCMSの代表格であるWordPress、SaaS型CMSの「はてなブログMedia」を中心に取り上げ、それぞれのメリット・デメリット、選定のポイントについてまとめてみました。 目次 目次 CMSはコンテンツ管理のためのシステム CMSのメリット：CMSを使わない場合と比較 コンテンツ更新作業の効率化 コンテンツ管理のしやすさ 機能が豊富 複数のユーザーで権限を分けて利用できる SEOをしやすい CMSのデメリット デザインの自由度が低い データベースの知識が必要 インストール型CMS：WordPress WordPressのメリット 無料で利用できる テーマ、プラグインが豊富 サイトの移転などがしやすい W
ドワンゴの教育事業ではエンジニアを採用中です！ 私達は「未来の当たり前の教育をつくる」ため、N予備校やN高等学校・S高等学校を支える教育システムの開発に日々取り組んでいます。 この記事を通じて、教育事業に興味をもっていただいたり話をきいてみたりするきっかけになったりしたらうれしいです。 順番に、ドワンゴの教育事業についてお話させていただきます。 ドワンゴの教育事業：そもそも何をやっているのか 採用の背景：なぜ今なのか 働く環境：どんな会社なのか 面談・応募の方法：コンタクトをとるにはどうすればいいか ドワンゴの教育事業 ドワンゴの教育事業 ドワンゴの教育事業では、大きく2つのアプリケーションの開発・保守・運用に携わっています。 N予備校と角川ドワンゴ学園の教務システム（N高等学校・S高等学校の生徒の入学状態や成績を管理するシステム）です。 教務システムはもちろんのこと、N予備校も角川ドワン
技術を教えるときの7つのポイント
技術を教えるときの7つのポイントオンラインスクールの講師として約4年、WebデザインやWebサイト制作を教えていて気づいた、教えるときのポイントをまとめました。 この記事は動画でも紹介しています。動画派の方はぜひどうぞ！ 1. 目的を明確にする今やってる事は何が目的なのか、なぜ必要なのか？そういったところを明確にしていないと、生徒さんの方が「なんでを今何やってんだろう？」「これなんか意味あるのかな？」と不安になってしまいます。そのため、今していること、しようとしていることが必要な理由や、どういう効果があるのかを事前にハッキリと説明しておくことが大切です。 さらに、今しようとしていることの歴史なんかも交えて説明できたらいいですね。例えば Web サイト制作のレスポンシブ対応を教えているところだったら、もともと Web サイトはデスクトップサイズでのみ閲覧されていたこと。スマートフォンやタブレ
ITエンジニアにおすすめしたい本を選ぶイベント「ITエンジニア本大賞 2024」（主催：翔泳社）の最終プレゼン大会が2月15日（木）に開催され、技術書部門の大賞にManaさんの『1冊ですべて身につくJavaScript入門講座』（SBクリエイティブ）、ビジネス書部門にラファエル・ヴィアナさんの『チームを動かすIT英語実践マニュアル』（アルク）が選ばれました。 CodeZineを運営する翔泳社が毎年2月に開催しているITエンジニア本大賞は、ITエンジニアに読んでもらいたい本を選ぶイベントです。一般投票で技術書部門とビジネス書部門のおすすめ本を募り、各部門から得票数の多い3冊ずつがプレゼン大会に出場。会場での最終投票によって大賞を決定します。 今回も計6冊の著者と編集者がプレゼン大会に臨み、著書の狙いや内容について紹介。満席の会場での投票によって、技術書部門ではManaさんの『1冊ですべて身に
初めまして。NRIネットコムに入社し2年目になる、新人デザイナーの馬場です。 Webのコンテンツ制作を生業としているチームで、様々な会社のWebサイトやUIデザインを制作しています！ 私が入社し実際の業務に参画するようになったのは、着任してから3ヶ月後です。 ではその3ヶ月間は一体何をしていたのかというと、日々研修を受けていました。 研修といってもお金を払って外部の講師に教わるものではなく、私が所属しているチームで実際に活躍しているデザイナー・ディレクターが直々に講師となり考えた、オリジナルな内容の研修でした。 なので、研修といえど実務に近いリアルな業務を体感することができました。 ほぼ知識ゼロの新人を一人前のデザイナーとして育て上げていくカリキュラムとして、「デザイン研修」「ディレクション研修」「HTMLコーディング研修」の3つの項目で構成されていました。 今回はその中でも「デザイン研修
株式会社RabeeでUI/UXデザインをしているmayukiです 0→1を生み出す瞬間、プロジェクトのエンジンとなれるようなばちイケデザイナーを目指しています。 突然ですが…こんなお困りごとありませんか？💭 「デザイナーとしてクライアントの要望をうかがう際に、何を聞いたらいいかわからない」 「ヒアリングしてきたものの、いざ手を動かし始めたらわからないことがポロポロ…」 「クライアントに聞きたいことがたくさん出てきてしまった…」 今回は、webサイトやアプリのデザインの制作を受注する想定で、クライアントへの初回ヒアリングをする際にデザイナーとして聞くべき最低限のことをまとめました。 ※保存版のためなかなか長い記事となっています。 この文章はこんな方におすすめです ・デザイナーになりたてのジュニアクラスの方 ・スクールに通ったり独学で勉強したのでそろそろクラウドソーシングでお仕事を受けたい方
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
グッドパッチエンジニアが選ぶ、推しデザインシステム10選｜Goodpatch Blog グッドパッチブログ
コーディングではなくデザインがメインの無料オンライン学習サービス
エンジニアがデザイナーといい仕事ができるために頑張ったこと｜seya
【デザイン初心者向け】初めてのアイキャッチ作成、先輩からのフィードバックをすべて公開します！
WEBデザイナーがマーケティング視点を取り入れると得られる50の恩恵｜川端康介
生成AIの進化でウェブ制作会社が消える可能性があるという話 | knowledge / baigie
UI上のラベルや説明文をどこにどれくらい書くべきか - hitode909の日記
主な企業サイトの種類と特徴 | knowledge / baigie
【理論編】情報の海に溺れないための航海術──「選択と集中」から「分散と修繕」へ｜安斎勇樹 | 遅いインターネット
JamstackなWeb制作者になるためのロードマップ
「私が未経験からwebデザイナーを諦めるまで」 挫折までの二年間を漫画で再現 | おたくま経済新聞
コーディングもするWebデザイナーがSTUDIOでWebサイトを作ってみた
【コンテンツマーケティング】オウンドメディア構築時のCMS選定方法 - はてなビジネスブログ
ドワンゴ教育事業 エンジニア採用中です！ - ドワンゴ教育サービス開発者ブログ
ITエンジニア本大賞 2024、技術書部門とビジネス書部門の大賞が決定！ プレゼン大会をレポート
新人デザイナーが入社後スキルアップした研修3step - NRIネットコムBlog
【2024年版】デザイナーが初回ヒアリングで聞くこと&聞き方まとめ｜mayuki@Rabee